Viele Content-Managment- und Blog-Systeme (CMS) wie z.b. Joomla, Drupal oder Wordpress kommen mit einem eingebauten WYSIWYG-Editor daher. Der dabei beliebteste ist der TinyMce von moxiecode.com. Mit ihm ist fast alles möglich was das Herz eines Webdesigners begehrt... fast alles.
Zum Beispiel beim Einrichten einer Shadowbox mit dem 'rel'-Attribut bekommt man ein Problem, welches wie folgt gelöst werden kann.
Das Problem
Genau genommen stellte sich die Frage: Wie
kann ich mit dem TinyMce Editor das 'rel'-Atrribut eines 'a'-Tags so
verändern, dass ich meine Shadowbox (www.shadowbox-js.com) entsprechend konfigurieren kann?
Für ein eindeutiges Beispiel sehen wir uns den Link vor der Konfiguration an:
<a href="index.html">Mein Link</a>
Und wie er nach der Konfiguration der Shadowbox aussehen sollte:
<a href="index.html" rel="shadowbox">Mein Link</a>
Teilweise will man auch einige Bilder zu einer Shadowbox gruppieren, was wie folgt aussieht:
<a href="index.html" rel="shadowbox[Gruppe]">Mein Link</a>
Das advlink Addon von TinyMce
Standardmäßig wird beim TinyMce Editor ein Plugin Namens 'advlink' (=Advanced Link) mitgeliefert.
Aktivieren kann man es mit folgendem Beispielcode bei der Initialisierung des Editors:
tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "advlink"
});
Das hat nun folgende Auswirkungen:
Wenn man im TinyMce nun einen Link hinzufügen will (Das kleine
Ketten-Symbol) bekommt man in dem darauf geöffneten Fenster einen
weiteren Reiter in dem sich noch viel mehr Optionen zu diesem Link
einstellen lassen. Unter anderem auch das 'rel'-Attribut. Hierbei kann
man aus einer Liste verschiedene Verknüpfungen wählen. Unter anderem ist
hier als letzter Eintrag sogar eine Verknüpfungfür eine Lightbox zu
finden, nur die Shadowbox vermissen wir an dieser Stelle.
Veränderungen im TinyMce Quellcode
Um nun auch die Shadowbox in die 'rel'-Attribut Liste des TinyMce
Editor Plugins advlink mit aufzunehmenöffnet man die Datei:
jscripts/tiny_mce/plugins/advlink/link.html
In Zeile 198 sieht man die Auflistung der einzelnen Einträge der
'rel'-Verknüpfungs Liste im advlink Dialog. Nun kann man getrost
folgende Zeile dort hinzufügen:
<option value="shadowbox[Geotechnik]">Shadowbox</option>
Oder wenn man seine Shadowboxen Gruppieren will auch mehrere Zeilen wie folgt:
<option value="shadowbox[group1]">Shadowbox Gruppe 1</option>
<option value="shadowbox[group2]">Shadowbox Gruppe 2</option>
<option value="shadowbox[group3]">Shadowbox Gruppe 3</option>
...
Abspeichern und den TinyMce Editor neu laden. Et voilá hat man
im advlink plugin des TinyMce ind der Auswahlliste einige neue Optionen
um seine 'rel'-Attribute in den 'a'-Tags mit einer shadowbox zu
versehen.
Bookmarks:
Delicious Facebook Google Yahoo Mr. Wong Linkarena Digg