Benutzer:Joomdesign/Programmierung/J16/Plugins/Editoren xtd/Beispiel l: Einfachen Text oder Platzhalter einfügen

Aus Joomla! Dokumentation
Wechseln zu: Navigation, Suche

24px-Tip.png Dieser Artikel zeigt wie "editors-xtd"-Plugins (Editor-Schaltflächen) erstellt werden!

Informationen für Entwickler:
Eigene Editors-xtd Plugins funktionieren nicht mit dem JCE in der Version 2.0.0 BETA
Mehr dazu am Ende dieser Seite.

Dieser Artikel benötigt Kenntnisse in: CSSCSS und CSS

Es wird Joomla 1.6 benötigt!

Inhaltsverzeichnis

[Bearbeiten] Beispiel l: Einfachen Text oder Platzhalter einfügen

Nafu_Button: Platzhalter einfügen

Kurzbeschreibung:

Fügt einen Platzhalter in das Editorfeld ein. Platzhalter können Text- oder HTML-Elemente oder aber auch die für ein Plugin üblichen geschweiften Klammern sein:

{sampletext}

Dieser Platzhalter darf genau einmal eingefügt werden. Ist schon ein Platzhalter vorhanden wird eine Warnung ausgegeben.

Mehrfache Einbindung - siehe Beispiel 3 - dort fehlt diese Überprüfung.


Los gehts!

[Bearbeiten] Liste der benötigten Dateien

Dateien im Paket Dateien installiert
File zip.png nafu_button.zip
File php.png nafu_button.php
File xml.png nafu_button.xml
File html.png index.html optional
Folder red.png language
File html.png index.html optional
Folder red.png de-DE
File ini.png de-DE.plg_editors-xtd_nafu_button.ini
File ini.png de-DE.plg_editors-xtd_nafu_button.sys.ini
Folder red.png en-GB
File ini.png en-GB.plg_editors-xtd_nafu_button.ini
File ini.png en-GB.plg_editors-xtd_nafu_button.sys.ini
Folder blue.png plugins
Folder blue.png editors-xtd
Folder red.png nafu_button
File php.png nafu_button.php
File xml.png nafu_button.xml
File html.png index.html 1
Folder red.png language
File html.png index.html 1
Folder red.png de-DE
File ini.png de-DE.plg_editors-xtd_nafu_button.ini
File ini.png de-DE.plg_editors-xtd_nafu_button.sys.ini
Folder red.png en-GB
File ini.png en-GB.plg_editors-xtd_nafu_button.ini
File ini.png en-GB.plg_editors-xtd_nafu_button.sys.ini

24px-Tip.png 1 Die Datei index.html wird beim anlegen eines Verzeichnisses durch den JInstaller() automatisch erzeugt.

[Bearbeiten] Plugin-Dateien

  • nafu_button.php
  • nafu_button.xml


[Bearbeiten] nafu_button.php

<?php defined('_JEXEC') or die; // no direct access
 
jimport('joomla.plugin.plugin');
 
/**
 | Editor-Schaltfläche
 | zum Einfügen eines Platzhalters
 | Ist dieser bereits vorhanden, wird eine Warnung angezeigt
 | 02:59 02.03.2011 jd
 */
 
class plgButtonNafu_Button extends JPlugin
{
Info.png

Die Plugin-Klasse plgButtonNafu_Button erweitert die globale JPlugin-Klasse.

Klassennamen für Editor-Schaltflächen müssen immer nach dem Schema plgButton<NAME> benannt werden.

php __construct()

	function plgButtonNafu_Button(& $subject, $config)
	{
		parent::__construct($subject, $config);
		$this->loadLanguage();
	}
Info.png
Hier werden der aktuelle Kontext $subject und die Parameter des Plugins $config übergeben.
Die Sprachdateien werden mit der Funktion loadLanguage() hier ebenfalls eingebunden.

onDisplay()

 
	// Button anzeigen
	function onDisplay($name)
	{
Info.png
Die Funktion onDisplay() wird beim Aufrufen (anzeigen) des Buttons ausgeführt.
Hier werden die Optionen der Schaltfläche gesetzt und die Verarbeitung der Daten durch eine JavaScript-Funktion erledigt.
  • Der folgende Block erklärt sich durch die Kommentare von selbst. =;)
		// Referenz auf aktuelles Dokument-Objekt
		$doc = JFactory::getDocument();
 
		// Inhalt des Editors laden
		$getContent = $this->_subject->getContent($name);
 
		// Neues Button-Objekt erzeugen
		$button = new JObject();
 
		// Platzhalter ( @string )
		$placeholder = '{sampletext}';
 
		// Fehlermeldung wenn bereits ein Platzhalter existiert
		$present = JText::_('PLG_EDITORSXTD_NAFU_BUTTON_PRESENT', true) ;

insertPlaceholder()

		// JavaScript erzeugen
		$script = "
		function insertPlaceholder(editor)
		{
			var content = $getContent;
			if (content.match(/$placeholder/i)) {
				alert('$present');
			} else {
				jInsertEditorText('$placeholder', editor);
			}
		}";
 
		// JavaScript an Dokument übergeben
		$doc->addScriptDeclaration($script);
Info.png
Diese JavaScript-Funktion durchsucht den aktuellen Text nach Platzhaltern und
fügt einen Platzhalter $placeholder an Cursorposition ein, falls dieser nocht nicht vorhanden ist.

$button->set()

		$button->set('modal', false);
		$button->set('text', JText::_('PLG_EDITORSXTD_NAFU_BUTTON_BUTTON_TEXT'));
		$button->set('name', 'blank');
		$button->set('onclick', 'insertPlaceholder(\''.$name.'\');return false;');
		$button->set('link', '#');
Info.png
Hier werden die Beschriftung und weitere Optionen für die neue Schaltfläche gesetzt.
  • modal -- auf false -- da kein "Fenster" geöffnet werden soll
  • text -- der Schaltflächentext
  • name -- CSS-Klasse für Schaltfläche
    • eigene Klassen müssen durch eigene CSS-StyleSheet-Angaben hinzugefügt werden
    • blank gibt an, dass kein Bild in der Schaltfläche verwendet werden werden soll
  • onclick -- Dieser Handler startet bei Klick die oben angelegte JavaScript-Funktion insertPlaceholder().
  • link -- bekommt eine Raute # -- weil kein "Fenster" geöffnet werden soll


Funktion und Klasse abschließen (Neue Schaltfläche zurückgeben!)

		return $button;
	}
}

Hinweis.png Die komplette Datei nafu_button.php:


<?php defined('_JEXEC') or die; // no direct access
 
jimport('joomla.plugin.plugin');
 
/**
 | Editor-Schaltfläche
 | zum Einfügen eines Platzhalters
 | Ist dieser bereits vorhanden, wird eine Warnung angezeigt
 | 02:59 02.03.2011 jd
 */
 
class plgButtonNafu_Button extends JPlugin
{
	function plgButtonNafu_Button(& $subject, $config)
	{
		parent::__construct($subject, $config);
		$this->loadLanguage();
	}
 
	// Button anzeigen
	function onDisplay($name)
	{
		// Referenz auf aktuelles Dokument-Objekt
		$doc = JFactory::getDocument();
 
		// Inhalt des Editors laden
		$getContent = $this->_subject->getContent($name);
 
		// Neues Button-Objekt erzeugen
		$button = new JObject();
 
		// Platzhalter
		$placeholder = '{sampletext}';
 
		// Fehlermeldung wenn bereits ein Platzhalter existiert
		$present = JText::_('PLG_EDITORSXTD_NAFU_BUTTON_PRESENT', true) ;
 
		// JavaScript erzeugen
		$script = "
		function insertPlaceholder(editor)
		{
			var content = $getContent;
			if (content.match(/$placeholder/i)) {
				alert('$present');
			} else {
				jInsertEditorText('$placeholder', editor);
			}
		}";
 
		// JavaScript an Dokument übergeben
		$doc->addScriptDeclaration($script);
 
		$button->set('modal', false);
		$button->set('text', JText::_('PLG_EDITORSXTD_NAFU_BUTTON_BUTTON_TEXT'));
		$button->set('name', 'pagebreak');
		$button->set('onclick', 'insertPlaceholder(\''.$name.'\');return false;');
		$button->set('link', '#');
 
		return $button;
	}
}


[Bearbeiten] nafu_button.xml

Info.png
Dieses XML-Manifest wird zur Installation des Plugins in Joomla! benötigt

Hinweis.png Die komplette Datei:


<?xml version="1.0" encoding="utf-8"?>
<extension version="1.6" type="plugin" group="editors-xtd">
	<name>PLG_EDITORSXTD_NAFU_BUTTON</name>
	<author>wiki.joomla-nafu.de</author>
	<creationDate>03-2011</creationDate>
	<copyright>(C) All rights reserved.</copyright>
	<license>http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL</license>
	<authorEmail>info@example.com</authorEmail>
	<authorUrl>http://wiki.joomla-nafu.de</authorUrl>
	<version>1.0</version>
	<description>PLG_EDITORSXTD_NAFU_BUTTON_XML_DESCRIPTION</description>
	<files>
		<filename plugin="nafu_button">nafu_button.php</filename>
		<filename>index.html</filename>
		<folder>language</folder>
	</files>
	<languages folder="language">
		<language tag="en-GB">en-GB/en-GB.plg_editors-xtd_nafu_button.ini</language>
		<language tag="en-GB">en-GB/en-GB.plg_editors-xtd_nafu_button.sys.ini</language>
		<language tag="de-DE">de-DE/de-DE.plg_editors-xtd_nafu_button.ini</language>
		<language tag="de-DE">de-DE/de-DE.plg_editors-xtd_nafu_button.sys.ini</language>
	</languages>
</extension>
  • Zu Beachten ist die Angabe des Typs und der Gruppe:
<extension version="1.6" type="plugin" group="editors-xtd">
  • Es ist weiterhin nötig - die Datei, die beim Ansprechen des Plugins aufgerufen werden soll - anzugeben.
<filename plugin="nafu_button">nafu_button.php</filename>
Weitere Informationen: Joomla!_Programmierung/Programmierung/XML_Parameter_Elemente/Standardparameter


[Bearbeiten] Sprachdateien

  • en-GB.plg_editors-xtd_nafu_button.ini
  • en-GB.plg_editors-xtd_nafu_button.sys.ini
  • de-DE.plg_editors-xtd_nafu_button.ini
  • de-DE.plg_editors-xtd_nafu_button.sys.ini


[Bearbeiten] de-DE.plg_editors-xtd_nafu_button.ini

; 14:36 27.02.2011
; wiki.joomla-nafu.de
; All rights reserved.
; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
; Note : All ini files need to be saved as UTF-8
 
PLG_EDITORSXTD_NAFU_BUTTON="Schaltfläche - Nafu Button"
PLG_EDITORSXTD_NAFU_BUTTON_XML_DESCRIPTION="Demo Button von wiki.joomla-nafu.de"
PLG_EDITORSXTD_NAFU_BUTTON_PRESENT="Platzhalter bereits vorhanden"
PLG_EDITORSXTD_NAFU_BUTTON_BUTTON_TEXT="Platzhalter einfügen"

[Bearbeiten] de-DE.plg_editors-xtd_nafu_button.sys.ini

Seit Joomla 1.6 - Sprachdatei für Installation und Listenansicht im Administrationsbereich.

; 14:36 27.02.2011
; wiki.joomla-nafu.de
; All rights reserved.
; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
; Note : All ini files need to be saved as UTF-8
 
PLG_EDITORSXTD_NAFU_BUTTON="Schaltfläche - Nafu Button"
PLG_EDITORSXTD_NAFU_BUTTON_XML_DESCRIPTION="Demo Button von wiki.joomla-nafu.de"

Hinweis.png Die englischen Sprachdateien sind im Installationspaket enthalten und werden deshalb hier nicht extra aufgezeigt!

[Bearbeiten] Download als Paket

ToDo -- Alle Plugins dieser Anleitung können auch als Installations-Paket bei Sourceforge heruntergeladen werden.


[Bearbeiten] Hinweise

24px-Tip.png Die Beispiel Paket-Dateien werden über "Erweiterungen -> Erweiterungen: Installieren" im Backend installiert.

[Bearbeiten] Wichtig: für Nutzer des Joomla Content Editors (JCE)

Hinweis.png Eigene Editors-xtd Plugins funktionieren nicht mit der Version JCE 2.0.0 BETA!}}


Ursache: Diese Version bindet die Standardbuttons (Artikel, Bild, Umbruch, Weiterlesen)
in die Symbolleiste des Editors ein und blendet alle anderen Buttons aus.


  • Lösung 1: Plugins müssen in JCE-Toolbar-Buttons konvertiert werden.
    --Eine Anleitung zu JCE 2.0.+ Toolbar-Button-Erstellung wird es auch bald geben!}}


  • Lösung 2: Neues JCE-Plugin - welches nur die Standard-Buttons ausblendet. Alle zusätzlichen Schaltflächen werden wieder unterhalb des Editors angezeigt.
  • 09:19 07.03.2011 FIXED JCE 2.0.0beta1 Editor Plugin Beta


[Bearbeiten] Seiten-Navigation

[Bearbeiten] Artikel dieser Serie:

[Bearbeiten] Beispiel l
- Einfachen Text oder Platzhalter einfügen

[Bearbeiten] Beispiel ll
- Platzhalter mit Parameter einfügen

[Bearbeiten] Beispiel lll
- Modulposition einfügen

[Bearbeiten] Beispiel lV
- HTML-Block aus Template-Vorlage einfügen

[Bearbeiten] Beispiel V
- Plugin und View für (eigene) Komponente erstellen

[Bearbeiten] Beispiel Vl
- Platzhalter und Parameter über Einstellungen im Backend steuern

[Bearbeiten] Beispiel Vll
- JCE-Toolbar-Button erstellen

[Bearbeiten] Übersicht
Editor-Button-Plugins erstellen





In arbeit.png

Dieser Artikel befindet sich in Bearbeitung - bitte nicht ändern !

Marcel (Joom Design™) 13:45, 7. Mär. 2011 (CET)

Meine Werkzeuge
Namensräume
Varianten
Aktionen
Navigation
Sonstiges
Team Navigation
Werkzeuge