Die Programmierer rund um Jean-François Hovinne waren sehr fleißig und legten dieser Tage den WYMeditor in der Version 0.4 Beta 2 vor. Während ich Anfang des Jahres über die stabile Version 0.2 einen zweiteiligen Workshop veröffentlichte, ist die komplette Struktur und das Handling des Editors seit Version 0.3 komplett geändert worden. Hier die wichtigsten Änderungen seit Version 0.3 kurz zusammengefasst:

• In einem Fenster können mehrere Instanzen des Editors aufgerufen werden
• WYMeditor nutzt nun die JavaScript-Bibliothek „jQuery“
• Funktioniert mit den Browsern MSIE 6.0+, Gecko-basierten Browsern (Firefox 1.5+, SeaMonkey) und nun auch mit Opera ab Version 9.0
• WYMeditor ist von Haus aus mehrsprachig, darunter auch Deutsch
• Plugin-Schnittstelle (mit tidy und hovertools sind zwei Beispiele dabei, eine einfache Beschreibung der Schnittstelle ist auch auf der Webseite abrufbar)

Installation

Die Installation ist sehr einfach. Gehe in den Ordner mit der Datei, die den Editor einbinden soll.

In den Ordner entpacke den kompletten Inhalt des TAR-Archives (Ordnerstruktur beibehalten!). Dann muss noch die jQuery Javascript library 1.1.3+ besorgt werden. Die Datei entpacke dann ins selbe Verzeichnis in einen Ordner namens jQuery. Falls Du andere Pfade benutzt, muss das entsprechend angepasst werden, behalte aber die Dateinamen bei, dann findet der Editor alle Dateien automatisch. Falls Du doch andere Namen vergeben musst, sind einige Variablen anzupassen. Genaueres steht in der Onlinedokumentation.

Jetzt können die einzelnen Komponenten in die gewünschte Seite eingebunden werden. Im Head-Bereich füge folgende Zeilen ein:

‹link rel="stylesheet" type="text/css" media="screen" href="wymeditor/skins/default/screen.css" /›
‹script type="text/javascript" src="jquery/jquery.js"›‹/script›
‹!-- Nächste Zeile nur, wenn die Oberfläche in dt. Sprache erscheinen soll --›
‹script type="text/javascript" src="wymeditor/lang/de.js"›‹/script›
‹script type="text/javascript" src="wymeditor/jquery.wymeditor.js"›‹/script›
‹script type="text/javascript"›

var $j = jQuery.noConflict();

$j(function() {
$j(".wymeditor").wymeditor();
});

‹/script›

Es gibt eine Option, die deutsche Sprache in der Function $j zu aktivieren, da ich aber keine andere Sprache benötige, habe ich das gleich in der Datei wymeditor/jquery.wymeditor.js geändert. In Version 0.4 ist in Zeile 350 die Einstellung für die Option „lang“. Hier ersetze das „en“ durch „de“.

Um nun den Editor einzublenden, muss noch das entsprechende Editorfeld (die textarea) angepasst werden und der Submit-Button. Und so sollte es aussehen:

‹textarea class="wymeditor" name="text"› ‹/textarea›
‹input type="submit" class="wymupdate" /›

Wichtig! WYMeditor hat mit der vorliegenden Version noch Probleme mit Framesets. Wenn Du also Dein CMS mit Frames aufgebaut hast, kann es sein, dass der WYMeditor nicht funktioniert!

CSS-Klassen integrieren

Die Integration eigener Klassen ist auf den ersten Blick etwas komplizierter als noch in Version 0.2, hat man sich aber einmal mit der Syntax angefreundet, geht es doch recht flott von der Hand und bietet neue Möglichkeiten. Die Anleitung auf der Webseite wymeditor.org ist leider etwas dürftig, darum hier eine (hoffentlich) leichter verständliche Erklärung. Zuerst der angepasste Quellcode:

‹script type="text/javascript"›

var $j = jQuery.noConflict();

$j(function() {
$j(".wymeditor").wymeditor({

classesItems: [
{'name': 'blocksatz', 'title': 'P: Blocksatz', 'expr': 'p, blockquote'},
{'name': 'zentriert', 'title': 'P: Zentriert', 'expr': 'p'},
{'name': 'hinweis',   'title': 'P: Hinweis', 'expr': 'p[@class!="blocksatz"]'}
],

editorStyles: [
{'name': '.blocksatz', 'css': 'background: #ffd url(bg-blocksatz.jpg) repeat;'},
{'name': '.zentriert', 'css': 'background: #ffd url(bg-zentriert.jpg) repeat;'},
{'name': '.hinweis',   'css': 'background: #ffa; border: 1px solid #800;'}
],

dialogStyles: [
{'name': '.blocksatz', 'css': 'text-align: justify;'},
{'name': '.zentriert', 'css': 'text-align: center;'},
{'name': '.hinweis',   'css': 'background: #ffa; border: 1px solid #800;'}
]

});
});
‹/script›

Ich habe drei Klassen integriert. Diese sollen Absätze als blocksatz, zentriert und als wichtigen Hinweis ausgeben. Im Beispiel habe ich die Vorgabe gesetzt, dass die Klasse hinweis nicht auf Absätze angewendet wird, welche schon als blocksatz formatiert wurden.

Im Beispiel sind die Anweisungen in 3 Teile untergliedert. Die Klassen selbst definiere im Abschnitt classesItems. Die Anweisung notiere im Format:

name: Name der Klasse, title: Angezeigter Name, expr: betroffner Tag

Soll nun wie vorgegeben eine Klasse sich nicht mit einer anderen überschneiden dürfen, so kann diese in eckigen Klammern angegeben werden (siehe Klasse hinweis).
Mehrere Klassen werden mit Kommas voneinander getrennt (siehe Klasse blocksatz).
Diese 4 Zeilen würden schon reichen, wir wollen es aber etwas komfortabler, auf einen Blick soll sichtbar sein, welcher Absatz mit welcher Klasse formatiert wurde. Also fügen wir den Abschnitt editorStyles hinzu. Die Syntax lautet hier:

name: Name der Klasse, css: CSS-Anweisung

Tipp: Um bei all den Farben und Rahmen nicht durcheinander zu kommen, habe ich ein Hintergrundbild erstellt, so sehe ich sofort, welche Klasse zugewiesen wurde. Das Bild muss im Ordner wymeditor/iframe/default gespeichert bzw. sollte der Pfad relativ zu diesem angelegt werden! So sieht es bei mir aus:

Einziger Nachteil bei Einsatz eines Hintergrundbildes: Der Containername links oben wird nicht mehr eingeblendet.
Auch an die Vorschau wurde gedacht und so können mittels dialogStyles die Styles der Vorschau vordefiniert werden, eine praktische Sache! Die Syntax ist dieselbe wie bei editorStyles.

Es ist doch nicht so schwer, wie es auf den ersten Blick aussieht, oder? Beachten muss man vor allem die richtige Reihenfolge der Klammern und das Setzen von Kommas und Semikolons. Hat man einen Fehler, zeigt die Seite nur eine einfache Textarea an.

Text einfügen

Um nun den zu bearbeitenden Text in den Editor zu laden, gibt es auch eine Option. Da aber oft CMS auf Basis von PHP und MySQL eingesetzt werden, reicht es, innerhalb von ‹textarea›‹/textarea › den Text ausgeben zu lassen. Beispiel:

‹textarea class="wymeditor" name="text"›
‹? echo $daten[meintext] ?›
‹/textarea›
‹input type="submit" class="wymupdate" /›

Vielleicht hilft Euch diese kurze Einführung, sich mit dem Editor vertraut zu machen und sich tiefer mit den Funktionen zu beschäftigen. Ich konnte hier nur einen winzigen Teil der Funktionen besprechen und muss den Rest auch noch erforschen.

Mein Fazit

Natürlich ist der Editor um ein vielfaches mächtiger als Version 0.2. Aber jetzt ist es auch wesentlich komplizierter und fehleranfälliger, einen Editor mit umfangreichen Optionen auszustatten. Jetzt muss wieder jeder für sich selbst entscheiden, ob man sich in das System einarbeitet, weiterhin die alte Version benutzt oder sich nach Aternativen umsieht.
Wer schon mit der JavaScript-Bibliothek jQuery arbeitet, ist da natürlich klar im Vorteil.

Wer (wie ich) nur ein kleines CMS einsetzt, keine Operaunterstützung benötigt und wem ein einziges Editorfeld pro Seite genügt, dem kann ich nach wie vor den Editor in der Version 0.2 wärmstens empfehlen. Hier ist die Anpassung wesentlich einfacher, das System hat man in kurzer Zeit im Griff. Siehe dazu auch meinen Workshop zum WYMeditor.

Zu hoffen bleibt, dass die Dokumentation generell überarbeitet und besser strukturiert, sowie eine ausführliche Doku zu den Funktionen integriert wird. Schön wären verschiedene, gut dokumentierte (und vor allem gut strukturierte!) Demos, bei denen unterschiedliche Szenarien vorgestellt werden. Denn ich gebe es zu, zuerst schaut man in den Code vor lauter runden, eckigen und geschweiften Klammern wie die „Sau ins Uhrwerk“
Gespannt darf man auf die ersten Plugins sein, vielleicht ermöglicht diese Schnittstelle ja, den Editor zur Nummer 1 zu machen?
Wie ich im Forum lesen konnte, scheint man über eine Implementierung in WordPress nachzudenken. Schön wäre es ja und würde WYMeditor sehr gut stehen!