Benutzer:Joomdesign/Programmierung/J16/Plugins/Editoren xtd/Beispiel lV: HTML-Block aus Template-Vorlage einfügen

Aus Joomla! Dokumentation

< Benutzer:Joomdesign | Programmierung/J16/Plugins/Editoren xtd

Wechseln zu: Navigation, Suche

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: , und

Es wird benötigt!

Inhaltsverzeichnis

1 Beispiel lV: HTML-Block aus Template-Vorlage einfügen
2 Hinweise
- 2.1 Wichtig: für Nutzer des Joomla Content Editors (JCE)
3 Seiten-Navigation
- 3.1 Artikel dieser Serie:
- 3.2 Übersicht Editor-Button-Plugins erstellen

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

Nafu Button load HTML: Auswahlfenster

Kurzbeschreibung:

Fügt einen Block mit HTML in das Editorfeld ein.

Der Block wird über eine <select>-Liste in einem Modal-"Fenster" ausgewählt.

Der Block darf mehrfach eingefügt werden.

Ein Block wird in einer einfachen HTML-Datei
unter /media/textblocks/<NAME>.html gespeichert.

Los gehts!

[Bearbeiten] Liste der benötigten Dateien

plugins

editors-xtd

nafu_button_loadhtml

nafu_button_loadhtml.php

nafu_button_loadhtml.xml

modal.php

index.html ¹

form

modalform.xml

index.html ¹

language

index.html ¹

de-DE

de-DE.plg_editors-xtd_nafu_button_loadhtml.ini

de-DE.plg_editors-xtd_nafu_button_loadhtml.sys.ini

index.html ¹

en-GB

en-GB.plg_editors-xtd_nafu_button_loadhtml.ini

en-GB.plg_editors-xtd_nafu_button_loadhtml.sys.ini

index.html ¹

textblocks

sample.html

index.html ¹

¹ Die Datei index.html wird beim anlegen eines Verzeichnisses durch den JInstaller() automatisch erzeugt.

[Bearbeiten] Plugin-Dateien

[Bearbeiten] nafu_button_loadhtml.php

<?php defined('_JEXEC') or die; // no direct access
 
jimport('joomla.plugin.plugin');
 
/**
 | Editor-Schaltfläche
 | zum Einfügen eines HTML-Blocks aus einer Datei
 | 14:23 04.03.2011
 */
 
class plgButtonNafu_Button_Loadhtml extends JPlugin
{

Die Plugin-Klasse Nafu_Button_Loadhtml 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_Loadhtml(& $subject, $config)
	{
		parent::__construct($subject, $config);
		$this->loadLanguage();
	}

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)
	{

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');

insertHtmlPlaceholder()

		// JavaScript erzeugen
		$script = "
		function insertHtmlPlaceholder(filename) 
		{						
			if (filename == '') {
				filename = 'sample.html'
			}			
			if ( filename ) 
			{			
				var path = '".JURI::root()."/media/textblocks/';
				if ( filename == 'sample.html') 
					path = '".JURI::root()."/plugins/editors-xtd/".$this->_name."/textblocks/';
 
				var req = new Request({
					method: 'get',
					url: path+filename,
					onComplete: function(response) { 
						var HTMLres = response.replace(/{placeholder}/g, ' Name');
						jInsertEditorText(HTMLres, '".$name."');
						SqueezeBox.close(); 
					}
				}).send();
			}
		}
		";
 
		// JavaScript an Dokument übergeben
		$doc->addScriptDeclaration($script);

Diese JavaScript-Funktion lädt die im "Fenster" ausgewählte Vorlage per Ajax-Request
und fügt diesen Block an Cursorposition ein.

		// 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: 420, y: 220}}");
		$button->set('link', $link);

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;
	}
}

Die komplette Datei nafu_button_loadhtml.php:

<?php defined('_JEXEC') or die; // no direct access
 
jimport('joomla.plugin.plugin');
 
/**
 | Editor-Schaltfläche
 | zum Einfügen eines HTML-Blocks aus einer Datei
 | 14:23 04.03.2011
 */
 
class plgButtonNafu_Button_Loadhtml extends JPlugin
{
	function plgButtonNafu_Button_Loadhtml(& $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();
 
		// Joomla! Modalfunktion laden
		JHtml::_('behavior.modal');
 
		// JavaScript erzeugen
		$script = "
		function insertHtmlPlaceholder(filename) 
		{						
			if (filename == '') {
				filename = 'sample.html'
			}			
			if ( filename ) 
			{			
				var path = '".JURI::root()."/media/textblocks/';
				if ( filename == 'sample.html') 
					path = '".JURI::root()."/plugins/editors-xtd/".$this->_name."/textblocks/';
 
				var req = new Request({
					method: 'get',
					url: path+filename,
					onComplete: function(response) { 
						var HTMLres = response.replace(/{placeholder}/g, ' Name');
						jInsertEditorText(HTMLres, '".$name."');
						SqueezeBox.close(); 
					}
				}).send();
			}
		}
		";
 
		// 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: 420, y: 220}}");
		$button->set('link', $link);
 
		return $button;
	}
}

[Bearbeiten] nafu_button_loadhtml.xml

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_loadhtml">nafu_button_loadhtml.php</filename>

Die komplette Datei nafu_button_loadhtml.xml:

<?xml version="1.0" encoding="utf-8"?>
<extension version="1.6" type="plugin" group="editors-xtd">
	<name>PLG_EDITORSXTD_NAFU_BUTTON_LOADHTML</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_LOADHTML_XML_DESCRIPTION</description>
	<files>
		<filename plugin="nafu_button_loadhtml">nafu_button_loadhtml.php</filename>
		<filename>modal.php</filename>
		<filename>index.html</filename>
		<folder>form</folder>
		<folder>language</folder>
		<folder>textblocks</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

modal.php

<?php
/**
 | Editor-Schaltfläche
 | zum Einfügen eines HTML-Blocks aus einer Datei
 | 20:38 04.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_loadhtml', 
	JPATH_SITE.DS.'plugins'.DS.'editors-xtd'.DS.'nafu_button_loadhtml', 
	JRequest::getCmd('plang'), 
	true, 
	true
);
 
// Formular einbinden
$formFile = 'plugins'.DS.'editors-xtd'.DS.'nafu_button_loadhtml'.DS.'form'.DS.'modalform.xml';
$form = &JForm::getInstance('modalform', JPATH_SITE.DS.$formFile);
?>
<script type="text/javascript">
	function setParams()
	{
		var fname = document.getElementById('insertation_block').value;	
 
		if (window.parent) window.parent.insertHtmlPlaceholder(fname);
 
		return false;
	}
</script>
<fieldset>
	<legend><?php echo JText::_('BLOCK'); ?></legend>
	<p>
       <?php echo $form->getInput('block', 'insertation'); ?>
	</p>
</fieldset>
<p>
	<button onclick="setParams();"><?php echo JText::_('PLG_EDITORSXTD_NAFU_BUTTON_BUTTON_TEXT'); ?></button>
</p>

ToDo -- Fertigstellen!

[Bearbeiten] modalform.xml

Stellt ein Formular-Element (JForm) bereit. @seit

<?xml version="1.0" encoding="UTF-8"?>
<form>
    <fields name="insertation">
        <fieldset name="insertation">
            <field
                    type="filelist"
                    directory="media/textblocks" 
                    filter = "\.html$"
                    exclude="^sample(.*)\.html$|^index(.*)\.html$"
                    name="block"
                    default="-1"
                    id="block"
                    label="BLOCK"
                    description=""
                    />            
        </fieldset>
    </fields>
</form>

<field

type -- filelist sorgt für die Ausgabe einer <select>-Datei-Liste
directory -- Verzeichnis
filter -- Dateien von diesem Type finden
exclude -- Diese Dateien nicht auflisten (filtern)
name -- Element-<NAME>
default -- Standardwert - "-1" (keine Auswahl)
id -- Element-<ID>
label -- Beschriftung
description -- Beschreibung der Beschriftung

ToDo -- Fertigstellen!

[Bearbeiten] sample.html

textblocks

sample.html

<p>
	<img src="media/system/images/notice-info.png" alt="info" />
	 <strong>Ich bin ein HTML-Block mit Text und Bild.</strong>
</p>

[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

; 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 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_PARAMETER="Parameter"
PLG_EDITORSXTD_NAFU_BUTTON_CHOOSE="Bitte wählen..."

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

Seit - 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"

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

[Bearbeiten] Download als Paket

15:17 04.03.2011 Plugin Version 0.0.1 Stable Dev Only
- plg_nafu_button_loadhtml_0.0.1.zip powered by Sourceforge.

optionale Dateien

15:17 04.03.2011 Sample Html Blocks Stable
Enthält 2 Beispiele (Tabelle und Liste)
- nafu_html_blocks_0.0.1.zip powered by Sourceforge.

Dateien im Paket plg_nafu_button_loadhtml_0.0.1.zip
nafu_button_loadhtml.php nafu_button_loadhtml.xml modal.php index.html form modalform.xml index.html language index.html de-DE de-DE.plg_editors-xtd_nafu_button_loadhtml.ini de-DE.plg_editors-xtd_nafu_button_loadhtml.sys.ini index.html en-GB en-GB.plg_editors-xtd_nafu_button_loadhtml.ini en-GB.plg_editors-xtd_nafu_button_loadhtml.sys.ini index.html textblocks sample.html index.html

[Bearbeiten] Hinweise

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

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

 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
- plg_editors_jce_2.0.0beta1_editorsxtd_fix.zip powered by Sourceforge.

[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

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

Marcel (Joom Design™) 11:42, 7. Mär. 2011 (CET)

Von „http://www.joomla-wiki.de/index.php?title=Benutzer:Joomdesign/Programmierung/J16/Plugins/Editoren_xtd/Beispiel_lV:_HTML-Block_aus_Template-Vorlage_einf%C3%BCgen&oldid=5257“

Kategorien:

Benutzer:Joomdesign/Programmierung/J16/Plugins/Editoren xtd/Beispiel lV: HTML-Block aus Template-Vorlage einfügen

Inhaltsverzeichnis

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

[Bearbeiten] Liste der benötigten Dateien

[Bearbeiten] Plugin-Dateien

[Bearbeiten] nafu_button_loadhtml.php

[Bearbeiten] php __construct()

[Bearbeiten] onDisplay()

[Bearbeiten] nafu_button_loadhtml.xml

[Bearbeiten] modal.php

[Bearbeiten] modalform.xml

[Bearbeiten] sample.html

[Bearbeiten] Sprachdateien

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

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

[Bearbeiten] Download als Paket

[Bearbeiten] Hinweise

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

[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

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Aktionen

Suche

Navigation

Sonstiges

Team Navigation

Werkzeuge

Benutzer:Joomdesign/Programmierung/J16/Plugins/Editoren xtd/Beispiel lV: HTML-Block aus Template-Vorlage einfügen

Inhaltsverzeichnis

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

[Bearbeiten] Liste der benötigten Dateien

[Bearbeiten] Plugin-Dateien

[Bearbeiten] nafu_button_loadhtml.php

[Bearbeiten] php __construct()

[Bearbeiten] onDisplay()

[Bearbeiten] nafu_button_loadhtml.xml

[Bearbeiten] modal.php

[Bearbeiten] modalform.xml

[Bearbeiten] sample.html

[Bearbeiten] Sprachdateien

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

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

[Bearbeiten] Download als Paket

[Bearbeiten] Hinweise

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

[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

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Aktionen

Suche

Navigation

Sonstiges

Team Navigation

Werkzeuge

[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