Wie versprochen, möchte ich den WYMeditor etwas eingehender beleuchten und zeigen, wie man diesen Onlineeditor leicht in eigene PHP/MySQL-Projekte integriert. Heute stelle ich WYM erst einmal vor und zeige, wie du ihn an eigene Bedürfnisse anpassen kannst.

Der nachfolgende Screenshot zeigt den Editor im originalen Zustand. Wenn du dir den Editor hier heruntergeladen hast, kannst du das gleich mit der editor.htm testen. Nicht wundern, wenn im IE ein paar Buttons mehr erscheinen, die Tabellenleiste funktioniert nur dort (die Tabellenbearbeitung ist in Firefox anders und sogar komfortabler gelöst).

Zeichenerklärung:

1. die wichtigsten Textformate, Listen, Undo/Redo-Funktion, Link‑, Bild‑ und Tabellenassistent
2. Assistent zum Einfügen von Text aus Word, Quellcode-Ansicht und Vorschau
3. Die wichtigsten Blockformate
4. Hier kannst du eigene Klassen definieren. Die Formatierung, die dem aktuellen Absatz zugewiesen wurde, ist ganz praktisch hellblau hervorgehoben. Unter Specials kannst du komplette Vorlagen, z.B. häufig verwendete HTML-Konstrukte abrufen.
5. eine der Besonderheiten von WYM: man sieht sofort, welches Absatzformat zugewiesen wurde.

Probiere doch einmal die Funktionen aus. Die Arbeit mit WYM ist nicht viel anders als in herkömmlichen Editoren. Der Vorteil bei WYM: alle Befehle kannst du nach belieben anpassen! Das machen wir im nächsten Schritt. Öffne bitte die Datei editor.htm in deinem HTML-Editor, Notepad tuts natürlich auch. Es wäre schön, wenn dein Programm Zeilennummern anzeigt, das macht die weitere Vorgehensweise einfacher.

Blockelemente anpassen

Der Quellcode ist gut dokumentiert, interessant wird es für heute ab Zeile 96 (‹div id=“panels“›). Ab hier kannst du Blockelemente und Klassen Deinen Wünschen entsprechend anpassen. Schauen wir uns zuerst die Syntax der Container etwas genauer an:

<a id="m_paragraph" href="#" onclick="setContainer('P');
getCleanHTML();return false;">Paragraph</a>

Im onClick-Ereignis werden 2 Funktionen aufgerufen. setContainer enthält das gewünschte Blockelement, mit getCleanHTML werden die Änderungen im Quelltext eingetragen.
Jeder Link erhält eine ID. Achte darauf, dass keine ID doppelt vergeben wird! Dann noch dem Link einen Namen geben und fertig. Pass doch erst einmal die Container an Deine Wünsche an, übersetze vielleicht die Linktexte, so bekommst du schnell ein Gefühl für die Arbeit mit diesen speziellen Links.

So sieht das Ergebnis z.B. bei mir aus:

  <div id="m_containers">
  <h2>Blockelemente</h2>
  <a id="m_paragraph" href="#" onclick="setContainer('P');
getCleanHTML();return false;">Paragraph (Absatz)</a>

  <a id="m_h3" href="#" onclick="setContainer('H3');
getCleanHTML();return false;">Überschrift h3</a>

  <a id="m_h4" href="#" onclick="setContainer('H4');
getCleanHTML();return false;">Überschrift h4</a>

  <a id="m_pre" href="#" onclick="setContainer('PRE');
getCleanHTML();return false;">Unformatiert (pre)</a>

  <a id="m_blockquote" href="#" onclick="setContainer
('BLOCKQUOTE');getCleanHTML();return false;">Zitat</a>
  </div>

Klassen einfügen

Mit den Klassen wird es ein wenig komplizierter. Aber schauen wir uns den Aufbau erst einmal am Beispiel der Klasse date an (Zeile 120):

  <a href="#" name="date" onclick="
setClass('date','P,DIV','*');
getCleanHTML();return false;">date</a>

Entscheidend ist die Javascriptfunktion setClass(). Dieser Funktion müssen 3 Parameter mitgegeben werden.
Parameter 1 ist der Name der Klasse, die du in Deinem Stylesheet notiert hast.
Parameter 2 gibt an, in welchen Elementen die Klasse erlaubt ist. Mit ‚*‘ kann die Klasse überall eingesetzt werden.
In Parameter 3 werden die Klassen notiert, mit denen Konflikte auftreten können. Mit einem Stern gibst du an, dass die Klasse mit keiner anderen kombiniert werden darf.
Optional gibt es noch einen 4. Parameter. Mit diesem kannst du explizit festlegen, dass die Klasse mit den angegeben Klassen kombiniert werden kann. Im Editor wird der Parameter z.B. bei side block genutzt.

Willst du mehrere Klassen angeben, trenne diese mit einem Komma!

Probieren wir es aus:
Der 2. Absatz im Editor ist mit einem grauen Rahmen hervorgehoben. Setze den Cursor in diesen Absatz und du siehst, dass die Klasse side block hervorgehoben wird. Diese ist also schon zugewiesen. Was macht diese Klasse? Teste es doch einmal mit der Vorschau …

Aha, der Absatz wird in einem separaten Block rechts dargestellt. Schließe die Vorschau, klicke in den Absatz und wähle die Klasse date. Nichts passiert? Dann funktioniert es auch richtig, denn dem armen date ist es verboten, mit einer weiteren Klasse zusammenzuarbeiten. Probiere jetzt die Klasse important. Das funktioniert, zu sehen an der Hervorhebung der beiden Klassen. Wenn du nun noch einmal die Vorschau aufrufst, siehst du, dass der Block rechts einen doppelten Rahmen hat. Den hat er aus der Klasse important übernommen.

Klingt ein wenig kompliziert? Macht doch nichts. Erstelle dir im Stylesheet soviele Klassen wie du brauchst, dann benötigst du auch den 3. und 4. Parameter nicht. Notiere aber den 3. Parameter mit einem ‚*‘. Und wenn du die Klasse wechseln willst, klicke zuerst auf Remove Classes.

Definieren wir noch ein paar eigene Klassen. Ich notiere immer in meinen Stylesheets 4 Klassen für die Absatzformatierung linksbündig, rechtsbündig, zentriert und blocksatz und 2 Klassen für Bilder, einmal links und einmal rechts ausgerichtet. Bei diesen notiere ich noch einen Abstand zum Text von 10 Pixel. So sieht das in meinem Stylesheet aus:

.links 	{ text-align: left; }
.rechts { text-align: right; }
.blocksatz { text-align: justify; }
.zentriert { text-align: center; }
.bildlinks { float: left; margin-right: 10px; }
.bildrechts { float: right; margin-left: 10px; }

Die wollen wir nun in WYM einbauen. Und so sieht das dann aus:

  <a href="#" name="links"
onclick="setClass('links','P','');
getCleanHTML();return false;">Linksbündig</a>

  <a href="#" name="zentriert"
onclick="setClass('zentriert','P','');
getCleanHTML();return false;">Zentriert</a>

  <a href="#" name="rechts"
onclick="setClass('rechts','P','');
getCleanHTML();return false;">Rechtsbündig</a>

  <a href="#" name="blocksatz"
onclick="setClass('blocksatz','P','');
getCleanHTML();return false;">Blocksatz</a>

  <h3>Bilder</h3>
  <a href="#" name="bildlinks"
onclick="setClass('bildlinks','IMG','');
getCleanHTML();return false;">Bild links vom Text</a>

  <a href="#" name="bildrechts"
onclick="setClass('bildrechts','IMG','');
getCleanHTML();return false;">Bild rechts vom Text</a>

Ist doch nicht schwer, oder? Achte darauf, den Linknamen (name=““) entsprechend anzupassen. Die Bildformate habe ich durch die h3‑Überschrift vom Rest getrennt. Auf dem Bild siehst du meine (eingedeutschte) Formatierungsleiste.

Tipps:

Die Vorschau von WYM hat mehrere Stylesheets, die du oben mit switch skin nacheinander aufrufen kannst. Da sind deine Styleanweisungen wahrscheinlich nicht dabei. Mache doch folgendes. Lege dir ein Stylesheet mit deinen speziellen Formatanweisungen an. Öffne im Ordner dialogs die Datei preview.htm. Verlinke hier im head-Breich dein Style und ab sofort werden in den einzelnen Skins deine Anweisungen sichtbar.

Hast du Textbausteine, die du häufig benötigst? Dann schau dir die Zeile 129, im Container „Special“ mal genauer an. Mit dem Link „Insert WYMeditors description“ werden 2 Zeilen Text inklusive HTML-Code eingefügt.
Diese „Codeschnipsel“ kannst Du in die Datei config.js aus dem Hauptverzeichnis eintragen. Wie die Schleife var custom_values= (ganz unten ab Zeile 46) bindest du deine Textbausteine ein. Zum Beispiel so:

var mein_Text1=
{
  "test":  "Hier kommt der Text rein. Der kann auch
  sehr lang sein. Wichtig ist die Maskierung
  der \"Anführungszeichen\" mit einem
  vorangestellten Backslash!"
}

Beachte die Schreibweise! Zuerst die Variable festlegen, dann in Anführungszeichen dem „Schnipsel“ einen Namen geben und zum Schluss, ebenfalls in Anführungszeichen, den eigentlichen Text. Natürlich darfst Du auch die geschweiften Klammern nicht vergessen! Hier noch die Einbindung in den Editor:

  <a href="#" title="Testeintrag"
onclick="insertAtCursor(mein_Text1['test']);
getCleanHTML();return false;">
  Ich bin der Linktext</a>

Soviel für heute. Ihr dürft den Text gerne verlinken, eine Weiterverwendung ohne mein Einverständnis ist jedoch nicht erlaubt.
Wenn Interesse besteht, werde ich im nächsten Teil beschreiben, wie man den Editor in ein PHP/MySQL-Projekt einbindet und sich eine Menge Arbeit spart, falls neue Versionen herauskommen. Auch für eine komfortablere Bildauswahl habe ich eine Lösung, die ich vorstellen kann. Also hinterlasst doch bitte einen kurzen Kommentar, wenn ich weitermachen soll, ok?

Vielen Dank an das WYMeditor-Team für diesen tollen Editor!