Benutzer:Joomdesign/Programmierung/J16/Plugins/Editoren xtd/Beispiel III: Modulposition 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 lll: Modulposition einfügen

Nafu_Button: Modulposition einfügen

Kurzbeschreibung:

  • Fügt {loadposition <POSITION>} zum Laden einer Modulposition in das Editorfeld ein
  • Dieser Platzhalter darf mehrfach eingefügt werden.
  • Positions-Auswahl über <select>-Liste oder <input>-Feld.





Los gehts!

[Bearbeiten] Liste der benötigten Dateien

Folder blue.png plugins

Folder blue.png editors-xtd
Folder red.png nafu_button_loadmodule
File php.png nafu_button_loadmodule.php
File xml.png nafu_button_loadmodule.xml
File php.png modal.php
File html.png index.html 1
Folder red.png form
File xml.png modalform.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_loadmodule.ini
File ini.png de-DE.plg_editors-xtd_nafu_button_loadmodule.sys.ini
File html.png index.html 1
Folder red.png en-GB
File ini.png en-GB.plg_editors-xtd_nafu_button_loadmodule.ini
File ini.png en-GB.plg_editors-xtd_nafu_button_loadmodule.sys.ini
File html.png index.html 1



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

[Bearbeiten] Plugin-Dateien

[Bearbeiten] nafu_button_loadmodule.php

<?php defined('_JEXEC') or die; // no direct access
 
jimport('joomla.plugin.plugin');
 
/**
 | Editor-Schaltfläche
 | zum Einfügen des Platzhalters {loadposition } 
 | 10:54 07.03.2011
 */
 
class plgButtonNafu_Button_Loadmodule extends JPlugin
{
Info.png

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

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

[Bearbeiten] php __construct()

	function plgButtonNafu_Button_Loadmodule(& $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.

[Bearbeiten] 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.
		// Referenz auf aktuelles Dokument-Objekt
		$doc = JFactory::getDocument();
 
		// Neues Button-Objekt erzeugen
		$button = new JObject();
 
		// Joomla! Modalfunktion laden
		JHtml::_('behavior.modal');

insertModulePlaceholder()

		// JavaScript erzeugen
		$script = "
 
		function insertModulePlaceholder(params) {
			var placeholder = (params) ? '$placeholder'+' '+params+'}' : '';
			if (placeholder) {				
				editor_id = getElementIdFromName('".$name."');
				jInsertEditorText(placeholder, editor_id);
				SqueezeBox.close();
			}
		}
Info.png
Diese JavaScript-Funktion fügt die im "Fenster" ausgewählte Position an Cursorposition ein.
		function getElementIdFromName(el_name)
		{
			var el = document.getElementsByName(el_name);
			if (el[0]) {
				var attr = el[0].attributes;								
				for (var i = 0; i < attr.length; i++) 
				{
					if ( attr[i].name == 'id' ) {
						return attr[i].value;
					}
				}
				return false;
			}
			else {
				return el_name;	
			}			
		}
Info.png
Diese JavaScript-Funktion findet die richtige ID für das Editorfeld.
		";
		// JavaScript an Dokument übergeben
		$doc->addScriptDeclaration($script);
		// Basisverzeichnis und aktuelle Sprache setzen
		$basePath = (JFactory::getApplication()->isAdmin()) ? '../' : './';
		$languageTag = JFactory::getLanguage()->getTag();
 
		// Pfad zum Modal-Fenster
		$link = $basePath.'plugins/editors-xtd/'.$this->_name.'/modal.php?plang='.$languageTag;

$button->set()

		$button->set('modal', true);
		$button->set('text', JText::_('PLG_EDITORSXTD_NAFU_BUTTON_BUTTON_TEXT'));
		$button->set('name', 'blank');
		$button->set('options', "{handler: 'iframe', size: {x: 580, y: 170}}");
		$button->set('link', $link);
Info.png
Hier werden die Beschriftung und weitere Optionen für die neue Schaltfläche gesetzt.
  • modal -- auf true -- es soll ein "Fenster" geöffnet werden
  • 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 soll
  • options -- Optionen für "Fenster".
  • link -- Pfad ($link) zum "Fenster" welches geöffnet werden soll


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

		return $button;
	}
}



Hinweis.png Die komplette Datei nafu_button_loadmodule.php:


<?php defined('_JEXEC') or die; // no direct access
 
jimport('joomla.plugin.plugin');
 
/**
 | Editor-Schaltfläche
 | zum Einfügen des Platzhalters {loadposition } 
 | 10:54 07.03.2011
 */
 
class plgButtonNafu_Button_Loadmodule extends JPlugin
{
	function plgButtonNafu_Button_Loadmodule(& $subject, $config)
	{
		parent::__construct($subject, $config);
		$this->loadLanguage();
	}
 
	// Button anzeigen
	function onDisplay($name)
	{
		// Referenz auf aktuelles Dokument-Objekt
		$doc = JFactory::getDocument();
 
		// Neues Button-Objekt erzeugen
		$button = new JObject();
 
		// Platzhalter
		$placeholder = '{loadposition';
 
		// Joomla! Modalfunktion laden
		JHtml::_('behavior.modal');
 
		// JavaScript erzeugen
		$script = "				
		function insertModulePlaceholder(params) {
			var placeholder = (params) ? '$placeholder'+' '+params+'}' : '';
			if (placeholder) {				
				editor_id = getElementIdFromName('".$name."');
				jInsertEditorText(placeholder, editor_id);
				SqueezeBox.close();
			}
		}
		function getElementIdFromName(el_name)
		{
			var el = document.getElementsByName(el_name);
			if (el[0]) {
				var attr = el[0].attributes;								
				for (var i = 0; i < attr.length; i++) 
				{
					if ( attr[i].name == 'id' ) {
						return attr[i].value;
					}
				}
				return false;
			}
			else {
				return el_name;	
			}			
		}
		";
 
		// JavaScript an Dokument übergeben
		$doc->addScriptDeclaration($script);
 
		// Basisverzeichnis und aktuelle Sprache setzen
		$basePath = (JFactory::getApplication()->isAdmin()) ? '../' : './';
		$languageTag = JFactory::getLanguage()->getTag();
 
		// Pfad zum Modal-Fenster
		$link = $basePath.'plugins/editors-xtd/'.$this->_name.'/modal.php?plang='.$languageTag;
 
		$button->set('modal', true);
		$button->set('text', JText::_('PLG_EDITORSXTD_NAFU_BUTTON_BUTTON_TEXT'));
		$button->set('name', 'blank');
		$button->set('options', "{handler: 'iframe', size: {x: 580, y: 170}}");
		$button->set('link', $link);
 
		return $button;
	}
}


[Bearbeiten] nafu_button_loadmodule.xml

Info.png
Dieses XML-Manifest wird zur Installation des Plugins in Joomla! benötigt
  • 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_loadmodule">nafu_button_loadmodule.php</filename>

Hinweis.png Die komplette Datei nafu_button_loadmodule.xml:


<?xml version="1.0" encoding="utf-8"?>
<extension version="1.6" type="plugin" group="editors-xtd">
	<name>PLG_EDITORSXTD_NAFU_BUTTON_LOADMODULE</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>0.0.1</version>
	<description>PLG_EDITORSXTD_NAFU_BUTTON_LOADMODULE_XML_DESCRIPTION</description>
	<files>
		<filename plugin="nafu_button_loadmodule">nafu_button_loadmodule.php</filename>
		<filename>modal.php</filename>
		<filename>index.html</filename>
		<folder>form</folder>
		<folder>language</folder>
	</files>
	<languages folder="language">
		<language tag="en-GB">en-GB/en-GB.plg_editors-xtd_nafu_button_loadhtml.ini</language>
		<language tag="en-GB">en-GB/en-GB.plg_editors-xtd_nafu_button_loadhtml.sys.ini</language>
		<language tag="de-DE">de-DE/de-DE.plg_editors-xtd_nafu_button_loadhtml.ini</language>
		<language tag="de-DE">de-DE/de-DE.plg_editors-xtd_nafu_button_loadhtml.sys.ini</language>
	</languages>
</extension>


[Bearbeiten] modal.php


Hinweis.png Die komplette Datei modal.php:


<?php
/**
 | Editor-Schaltfläche
 | zum Einfügen eines HTML-Blocks aus einer Datei
 | 10:54 07.03.2011
 */
 
// Charset (Kodierung) Ausgabe
header('Content-Type: text/html; charset=utf-8');
 
// Definiere J!
define( '_JEXEC', 1 );
 
// J! Pfad setzen
define( 'JPATH_BASE', realpath(dirname(__FILE__).'/../../..' ));
define( 'DS', DIRECTORY_SEPARATOR );
 
// Dateien des J! Frameworks einbinden
require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' );
require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );
jimport( 'joomla.language.language' );
jimport( 'joomla.form.form' );
 
// Lade J! Framework
$app = JFactory::getApplication('administrator');
 
// Referenz auf aktuelles Sprachen-Objekt
$lang = JFactory::getLanguage();
 
// Sprache für Plugin laden
$lang->load('plg_editors-xtd_nafu_button_loadmodule', 
	JPATH_SITE.DS.'plugins'.DS.'editors-xtd'.DS.'nafu_button_loadmodule', 
	JRequest::getCmd('plang'), 
	true, 
	true
);
 
// Formular einbinden
$formFile = 'plugins'.DS.'editors-xtd'.DS.'nafu_button_loadmodule'.DS.'form'.DS.'modalform.xml';
$form = &JForm::getInstance('modalform', JPATH_SITE.DS.$formFile);
?>
<script type="text/javascript">
	function setParams()
	{
		var module_position = document.getElementById('insertation_position').value;		
		var new_position = document.getElementById('insertation_new_position').value;
 
		module_position = (new_position) ? new_position : module_position;
 
		if (window.parent) window.parent.insertModulePlaceholder(module_position);
 
		return false;
	}
</script>
<fieldset>
	<legend><?php echo JText::_('PLG_EDITORSXTD_NAFU_BUTTON_CHOOSE'); ?></legend>	
	<p>
		<?php echo $form->getLabel('position', 'insertation'); ?>
		<?php echo $form->getInput('position', 'insertation'); ?>
		- <small><?php echo JText::_('JOPTION_OR'); ?></small> - 
		<?php echo $form->getLabel('new_position', 'insertation'); ?>
		<?php echo $form->getInput('new_position', 'insertation'); ?>
	</p>
</fieldset>
<p>
	<button onclick="setParams();"><?php echo JText::_('PLG_EDITORSXTD_NAFU_BUTTON_BUTTON_TEXT'); ?></button>
</p>


[Bearbeiten] modalform.xml


Hinweis.png Die komplette Datei modalform.xml:


<?xml version="1.0" encoding="UTF-8"?>
<form>
    <fields name="insertation">
        <fieldset name="insertation">
		<field
			type="sql"
			query="SELECT position FROM #__modules GROUP BY position"
			key_field="position"
			value_field="position"
			name="position"
			default="none"
			id="position"
			label="PLG_EDITORSXTD_NAFU_BUTTON_MODULE_POSITION"
			description=""
			/>
		<field
			type="text"
			default=""
			name="new_position"
			id="new_position"
			label="PLG_EDITORSXTD_NAFU_BUTTON_LOADMODULE_CHOOSE_NEW"
			description=""
			/>
        </fieldset>
    </fields>
</form>


[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_loadmodule.ini

; 10:49 07.03.2011
; wiki.joomla-nafu.de
; Copyright (C) 2005 - 2011 Open Source Matters. 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_LOADMODULE="Schaltfläche - Nafu Button (loadmodule)"
PLG_EDITORSXTD_NAFU_BUTTON_LOADMODULE_XML_DESCRIPTION="Demo Button zum Einfügen von loadmodule Modulpositionen - wiki.joomla-nafu.de"
PLG_EDITORSXTD_NAFU_BUTTON_PRESENT="Platzhalter bereits vorhanden"
PLG_EDITORSXTD_NAFU_BUTTON_BUTTON_TEXT="Modulposition einfügen"
PLG_EDITORSXTD_NAFU_BUTTON_MODULE_POSITION="Modulposition"
PLG_EDITORSXTD_NAFU_BUTTON_CHOOSE="Bitte wählen..."
PLG_EDITORSXTD_NAFU_BUTTON_LOADMODULE_CHOOSE_NEW="Position eingeben"
JOPTION_OR="oder"

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

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

; 11:59 05.03.2011
; wiki.joomla-nafu.de
; Copyright (C) 2005 - 2011 Open Source Matters. 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_LOADMODULE="Schaltfläche - Nafu Button (loadmodule)"
PLG_EDITORSXTD_NAFU_BUTTON_LOADMODULE_XML_DESCRIPTION="Demo Button zum Einfügen von loadmodule position - wiki.joomla-nafu.de"

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


[Bearbeiten] Download als Paket



Dateien im Paket plg_nafu_button_loadmodule_0.0.1.zip
File php.png nafu_button_loadmodule.php
File xml.png nafu_button_loadmodule.xml
File php.png modal.php
File html.png index.html
Folder red.png form
File xml.png modalform.xml
File html.png index.html
Folder red.png language
File html.png index.html
Folder red.png de-DE
File ini.png de-DE.plg_editors-xtd_nafu_button_loadmodule.ini
File ini.png de-DE.plg_editors-xtd_nafu_button_loadmodule.sys.ini
File html.png index.html
Folder red.png en-GB
File ini.png en-GB.plg_editors-xtd_nafu_button_loadmodule.ini
File ini.png en-GB.plg_editors-xtd_nafu_button_loadmodule.sys.ini
File html.png index.html



[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™) 11:39, 7. Mär. 2011 (CET)

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