41.3 Ein passender Button

Um das Einfügen von Links zu erleichtern, werden wir unseren Usern einen Button zur Verfügung stellen, der auf einen Klick hin ein {hotlink=1 text=name} einfügt. Dazu benötigen wir einen Editor-Extension-Plug-in. Bei der XML-Datei beschränken wir uns dieses Mal auf das Nötigste:

1   <?xml version="1.0" encoding="utf-8"?> 
2   <install type="plugin" group="editors-xtd" 
3            version="1.5"> 
4      <name>Editorbutton – HotLink</name> 
5      <files> 
6         <filename plugin="hotlinkbtn">hotlinkbtn.php</filename> 
7         <filename>hotlink.png</filename> 
8     </files> 
9     <params /> 
10  </install>

Listing 41.5 hotlinkbtn.xml

Wie Sie sehen, hat sich die Gruppe in editors-xtd geändert (Zeile 2), und es stehen dieses Mal zwei Einträge im <files>-Tag (Zeilen 5 –10).

Ansonsten ereignet sich hier wenig Spektakuläres.

Wenden wir uns also dem Programmteil zu. Die Funktion, die aufgerufen wird, wenn Buttons angezeigt werden sollen, muss ein Objekt zurückgeben, das den Button definiert. Zudem müssen wir ein wenig CSS erstellen, um dem Button ein Bild zu geben.

1   <?php 
2   defined( '_JEXEC' ) or die( 'Restricted access' ); 
3   jimport( 'joomla.plugin.plugin' ); 
4   class plgButtonHotlinkbtn extends JPlugin { 
5      function plgButtonHotlinkbtn( &$subject, $config) { 
6         parent::__construct($subject, $config); 
7      } 
8      function onDisplay($name) 
9      { 
10         $doc =& JFactory::getDocument(); 
11         $css = ".button2-left .hotlink { 
12            background:transparent 
13                       url(../plugins/editors-xtd/hotlink.png) 
14                       no-repeat scroll 100  % 0; 
15            }"; 
16         $doc->addStyleDeclaration($css); 
17         $button = new JObject(); 
18         $button->set('onclick', 
19             'jInsertEditorText(\'{hotlink=1 text=name}\',     
20              \''.$name.'\');return false;'); 
21         $button->set('text', 'HotLink'); 
22         $button->set('name', 'hotlink'); 
23         $button->set('link', '#'); 
24         return $button; 
25      } 
26 } 
27 ?>

Listing 41.6 hotlinkbtn.php

Die Zeilen 1 bis 7 entsprechen dem Gerüst eines Plug-ins. Um den Button darzustellen, wird der onDisplay-Event definiert, dem als Parameter der Name des Editors übergeben wird. In Zeile 10 wird das Objekt des aktuellen Ausgabedokuments geholt. Das benötigen wir, um das CSS zu übergeben, das das Hintergrundbild des Buttons festlegt. Diese CSS-Anweisungen werden in den Zeilen 11 bis 15 festgelegt und in Zeile 16 an das Dokument übergeben. In Zeile 17 wird ein neues Objekt erstellt, das die Eigenschaften des Buttons enthalten soll. Diese werden in den folgenden Zeilen eingetragen. Zunächst wird das Verhalten bestimmt. Wenn auf den Button geklickt wird, so wird ein JavaScript-Befehl von Joomla! ausgeführt: jInsertEditorText. Dieser hat zwei Parameter: einmal den Text, der eingefügt werden soll, und dann den Namen des Editors. Diesen erhalten wir durch die PHP-Variable $name. In Zeile 21 wird die Beschriftung festgelegt und in Zeile 22 der Name, der wiederum als Schlüssel für die CSS-Klasse dient. In Zeile 23 setzen wir die URL des Buttons auf #, das heißt, das aktuelle Dokument.

Nun müssen Sie noch ein Bild mit dem Namen hotlink.png erstellen, das als Button angezeigt werden soll. Wir haben Ihnen auf der DVD schon eines mitgeliefert.

Jetzt können Sie das Plug-in über das Joomla!-Backend installieren. Nach der Installation muss es in der Plug-in-Verwaltung noch publiziert werden. Hier können Sie auch über die Spalte »Order« die Reihenfolge bestimmen. Wenn alles geklappt hat, dann sollte die Button-Leiste unter dem Editor im Frontend jetzt ungefähr so aussehen, wie in Abbildung 41.1 dargestellt.

Abbildung 41.1 Die Editor-Leiste mit Hotlink-Button

Ihr Kommentar