Der neue CKEditor
 

Mit über 3,5 Millionen Downloads ist der, in die Jahre gekommenen FCK-Editor eine feste Größe unter den Online-Wysiwyg Tools. Der Editor erfreute sich seit 2003 größter Beliebtheit und es standen eine Vielzahl an Erweiterungen zur Verfügung. Mit den heutigen Anforderungen an einen Editor für das WEB 2.0 Zeitalter konnte der treue Weggefährte allerdings nicht mehr mithalten. Deshalb hat das Entwicklerteam den Nachfolger CKEditor 3.X entwickelt. X, weil bereits das Release 3.1 veröffentlicht wurde und weitere Verbesserungen bereit stehen.

Auffällig ist das Look and Feel des neuen Editors, welches deutlich moderner ausfällt, aber auch unter der Haube hat sich eine Menge getan. Erfreulich ist die Cross-Browser Kompatiblität und die nahezu barrierefreie Anwendung. Auch der generierte Quellcode, den der Editor ausgibt, ist deutlich aufgeräumter und erreicht bessere Ergebnisse als sein Vorgänger. Wer früher die Nase gerümpft hat, weil in Webprojekten unsauberer Code ausgegeben wurde, wenn ein Editor zum Einsatz kam, der wird jetzt überrascht sein. CKEditor hält die W3C Standards ein.
Auch in Sachen Performance hat sich einiges getan. CKEditor setzt konsequent auf aktuelle Technologien und lädt spürbar schneller als sein Vorgänger bzw. sein Konkurrent TinyMCE ( tinymce.moxiecode.com ). Die zusätzliche Einbindung eines Kompressors ist bei der aktuellen Version nicht mehr notwendig.
In dem in unserer letzten Ausgabe vorgestellten gpEasy CMS  ( www.gpeasy.com )wurde bisher noch der Vorgänger eingesetzt. Im aktuellen Release setzt man nun auf den CKEditor und hat diesen mit einem Dateimanager verknüpft. Wenn man ein wenig die Foren beachtet, so wird man feststellen, dass der Umstieg auch bei vielen anderen CMS geplant, zumindest aber als AddOn angedacht ist.
Nach wie vor wird steht der Editor kostenlos zum Download zur Verfügung und steht unter den verteilten GPL, LGPL und MPL Open-Source-Lizenzen. Dieses dreifache copyleft Lizenz-Modell vermeidet Unverträglichkeit mit anderen Open-Source-Lizenzen. Für Unternehmen besteht zudem die Möglichkeit, eine geschlossene Lizenz zu erwerben.
Kleiner Wermutstropfen, auch der CKEditor bringt keinen Bild oder Fileupload mit. Dafür lassen sich beliebige Tools mit den Upload relevanten Funktionen verknüpfen. So hat man die freie Wahl beim Werkzeug für diese Aufgabe. Das oben genannte gpEasy CMS nutzt dazu ebenfalls die eigene Upload Funktion, welche über den Editor-Dialog angesprochen wird.
In diesem Artikel soll nicht nur vom neuen Editor geschwärmt werden, sondern es soll in konkreten Beispielen gezeigt werden, wie er zum Einsatz gebracht wird. Die Implementierung in die eigenen Skripte gelingt recht einfach, deshalb wendet sich dieser Artikel auch an diejenigen, die eher wenig Kenntnisse im Umgang mit Skriptsprachen haben. Einige grundlegende Kenntnisse in HTML und etwas Verständnis für den Quellcode sollte allerdings Voraussetzung sein. Der Editor wird in einem fiktiven Administrationsbereich einer Beispielseite verwendet. Vom Einsatz eines Editors im Frontend einer Website ist eher Abzuraten. In Foren sollte ein solches Tool aus Sicherheitsgründen nur mit eingeschränkter Funktionalität zum Einsatz kommen.

Installation
 

Gehen Sie auf http://ckeditor.com/download und laden Sie sich das Paket vom 6. Januar 2010 herunter, welches als Grundlage für diesen Artikel dient.  Legen Sie nun ein Verzeichnis mit folgender Struktur auf Ihrer Festplatte an. Wenn vorhanden sollten Sie das in einer Entwicklungsumgebung wie zum Beispiel XAMPP unterhalb des Verzeichnisses htdocs/ tun. XAMPP können Sie als Windows Installationspaket unter www.apachefriends.org ebenfalls kostenlos herunterladen.
 

Legen Sie nun folgende Verzeichnisstruktur an:
beispiel/
beispiel/admin/
beispiel/admin/tools/editor/
beispiel/images/  
Entpacken Sie nun den Inhalt aus dem Verzeichnis ckeditor aus dem Downloadpaket in das Verzeichnis tools/editor/. Die Verzeichnisse _samples und _source können Sie dabei weglassen. Sie enthalten Anwendungsbeispiele, die hier Schritt für Schritt erklärt werden, aber auf die vorhandene Struktur setzen.
Legen Sie nun ein neues HTML Dokument mit dem Namen admin1.html im Verzeichnis admin/ an.

Legen Sie nun ein Formular mit einem Textfeld an, für das später der Editor zum Einsatz kommen soll. In unserem Beispiel hat das Formular folgenden Aufbau:
<form action="form_ausgabe.php" method="post">
<p>
<label for="admin1">Admin 1:</label>
<br />
<textarea cols="80" id="editor1" name="beispiel" rows="10"></textarea>
<input type="submit" value="Senden" />
</p>
</form>
 Das Ergebnis kann man sich jetzt schon einmal im Browser ansehen. Beim Klick auf den Senden-Button soll der Inhalt des Textfeldes an das Skript form_ausgabe.php gesendet werden, welches folgenden Aufbau hat.
<?php
if ( isset( $_POST ) )
$postArray = &$_POST ; // 4.1.0 oder höher, benutze $_POST
else
$postArray = &$HTTP_POST_VARS ;    // älter als 4.1.0, benutze HTTP_POST_VARS

foreach ( $postArray as $sForm => $value )
{
if ( get_magic_quotes_gpc() )
$postedValue = htmlspecialchars( stripslashes( $value ) ) ;
else
$postedValue = htmlspecialchars( $value ) ;
?>
<table>
<tr>
<th style="vertical-align: top"><?php echo $sForm?></th>
<td><pre><?php echo $postedValue?></pre></td>
</tr>
</table>
<?php } ?>
Das entsprechende Codebeispiel finden Sie auch im Ordner _samples des Downloadpaketes und können es für sich modifizieren. Auf den Quellcode soll hier nicht weiter eingegangen werden. Für diejenigen unter Ihnen, die PHP verstehen eröffnen sich die Zeilen. Die Datei soll nur beispielhaft das Ziel aller Formulare sein, hat aber mit dem Einbau des Editors nur am Rande zu tun, deshalb soll der Erklärung keine Wichtigkeit gegeben werden.
 

Der Aufruf des Editors

Nun soll unsere Datei admin1.html mit dem Editor ausgestattet werden. Es werden zwei Möglichkeiten angeboten, wie der Editor aufgerufen wird. Entweder wird <textarea> über den Code oder über eine Klasse ersetzt. Wir zeigen beide Methoden. Dazu muss zunächst bei allen Methoden im Seitenkopf das JavaSkript des Editors eingebunden werden, was oberhalb von </head> geschieht.
Verwenden Sie für das Beispiel folgenden Aufruf:
<script type="text/javascript" src="tools/editor/ckeditor.js"></script>
Bis hierhin geschieht noch nichts. Das Skript wird zwar aufgerufen, aber das <textarea> wird noch nicht durch den Editor ersetzt. Dies geschieht, indem man nach dem schließenden </textarea> folgenden Codeschnipsel anhängt:
<script type="text/javascript">    CKEDITOR.replace( 'editor1' );</script>
Rufen Sie nun Ihre admin1.html im Browser auf und sehen Sie was geschieht.

 

Unser Textarea wird nun durch den CKEditor ersetzt und wir können nun alle Funktionen nutzen und ausprobieren. Spielen Sie nun ruhig erst einmal mit dem Editor herum. Sie werden feststellen, dass er einen großen Funktionsumfang hat und kaum Wünsche offen lässt. Alles was man für den Alltagsgebrauch benötigt, wird abgedeckt.
 

 

 

 

Zwei  Eingabefelder auf einer Seite

Manchmal ist es notwendig, dass auf einer Seite zwei Textareas verwendet werden müssen. Zum Beispiel wenn Sie Anleser und Hauptteil eines Artikels schreiben wollen. Damit Funktionen wie zum Beispiel das Rückgängig machen sich nicht auf beide Textareas auswirkt, müssen Sie dem zweiten Textarea die ID admin2 zuweisen und dies auch im darauffolgenden Codeschnipsel machen. So werden Kollisionen vermieden.

Ersetzen durch Klassen
 

Der wohl einfachste Weg ein <textarea> durch den Editor zu ersetzen ist der Einsatz der Klasse ckeditor. Bei dieser Methode können Sie auf den JavaScirpt Schnipsel verzichten. Bauen Sie einfach Ihr <textarea> wie folgt auf:
<textarea class="ckeditor" cols="80" id="admin1" name="beispiel" rows="10"></textarea>
Selbstvertändlich muss auch hier im Seitenkopf vor </head> der Editor aufgerufen werden.
 

Konfigurationsmöglichkeiten

Für den Editor gibt es diverse Möglichkeiten der Anpassung. Diese können durch den Skriptaufruf aus dem ersten Beispiel via Code eingestellt werden. Wir zeigen Ihnen hier die wichtigsten Möglichkeiten und deren Auswirkungen. Abschließend soll aufgezeigt werden, wie man einen externen Bild oder Dateiupload mit dem Editor auf gleiche Weise verknüpft.
 

Fullpage

Manchmal ist es notwendig einen kompletten Quellcode zwischen <HTML >und </HTML> in eine Datei zu schreiben. Das kann zum Beispiel CMS Systemen sinnvoll sein, die ohne Datenbank arbeiten. Auch andere Einsatzgebiete sind schnell denkbar. Dazu wird das dem <textarea> folgende Codeschnipsel wie folgt erweitert.
 <script type="text/javascript">
CKEDITOR.replace( 'admin1',
{
fullPage : true
});
</script>
Das Textarea sollte nun um den Kopf und Fußbereich einer Standard HTML-Seite erweitert, was dann in etwa so aussehen sollte.
<textarea" cols="80" id="admin1" name="beispiel" rows="10">
<html>
<head>
<title>Fullpage Beispiel</title>
</head>
<body>
<p>Inhalt</p>
</body>
</html>
</textarea>
Sie sehen beim Aufruf des Beispiels den jetzt zugelassenen Code nicht, es sei denn, Sie rufen die HTML Ansicht auf. So lassen sich komplette Seiten editieren. Probieren Sie es einmal aus.

Ein wenig Kosmetik

Auch CKEditor ist in seiner Optik anpassbar. Wie bei vielen anderen Editoren können verschiedene Skins eingesetzt werden, oder auch erstellt werden. Dem Downloadpaket liegen neben dem Standardskin mit dem Namen „Kama“ noch ein Skin im Office-Look und eines im alten FCK Design bei. Die entsprechenden Dateien befinden sich im Verzeichnis skins/. Wer Lust und Laune hat, der kann sich hier ein Beispiel für den Aufbau nehmen und sich sein eigenes Skin bauen. Das alte FCK-Design wurde im Übrigen beigelegt, weil  viele Nutzer sich an das „Old-School-Design“  gewöhnt hatten und diesem nachtrauern. Folgender Aufruf muss für ein anderes Design beispielhaft eingebunden werden:
CKEDITOR.replace( 'admin1',
{
skin : 'v2'
});
An manchen Positionen ist es sinnvoll, einen sehr eingeschränkten Editor zu zeigen. In diesem Fall nutzen Sie die Einstellung
CKEDITOR.replace( 'editor1',
 {
toolbar : 'Basic'
 });
In dieser Einstellung sind nur sehr wenige Formatierungen möglich und das Erstellen von Links.
Weitere Änderungen über die config.js
Im Verzeichnis des Editors finden Sie die Datei config.js, mit der Sie an Ihrem Editor eine Vielzahl von Änderungen vornehmen können. Beispielhaft finden Sie dort die Einträge für Sprache und Hintergrundfarbe für das Interface.  Hier besteht auch die Möglichkeit an zentraler Stelle die Toolbar einzuschränken oder zu erweitern.  Folgendes Codebeispiel soll verdeutlichen, wie die Toolbar in der Konfiguration aufgebaut ist:
CKEDITOR.editorConfig = function( config )
{
    config.toolbar = 'Toolbar';

    config.toolbar_Toolbar =
    [
        ['NewPage','Preview'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
        '/',
        ['Styles','Format'],
        ['Bold','Italic','Strike'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['Link','Unlink','Anchor'],
        ['Maximize','-','About']
    ];
};
Wenn Sie die Toolbar umgruppieren möchten, dann gilt folgendes zu beachten: [] schließt eine Symbolgruppe ein, Symbole werden Komma separiert in '' gesetzt. '-' erzeugt einen Leerschritt und '/', einen Umbruch. So können Sie die Toolbar an Ihre individuellen Bedürfnisse anpassen.
Einbinden eines Uploaders für Bilder oder Files
Für den CKEditor gibt es einen kostenpflichtigen Fileuploader mit dem Namen CKFinder. Das Tool kostet für eine einzelne Website 59,00 US$ und kann als Demo unter http://ckfinder.com heruntergeladen werden. Näheres zu CKFinder in unserem Tooltip. Wir möchten uns aber nicht mit dem Einbau von CKFinder beschäftigen, sondern einen beliebigen Uploader mit den Funktionen verbinden, die ein solches Werkzeug benötigen. Skripte für diesen Zweck gibt es eine Vielzahl. Von ganz einfach bis zum sehr umfangreichen Filemanager. Installieren Sie zunächst einen Uploader Ihrer Wahl in Ihrem Beispiel Administrationsbereich. Sinnvollerweise sollten Sie diesen dann in das Verzeichnis tools/ legen.  Beispielhaft sollen die notwendigen Dateien für Hochladen und Server durchsuchen upload.php und browse.php heißen. Unser angehängtes Script für die Textarea sollte dann so aussehen:
CKEDITOR.replace( 'admin1',
    {
 filebrowserBrowseUrl : '/tools/uploader/browse.php',
filebrowserUploadUrl : '/tools/uploader/upload.php'
    });
Nach dem speichern der Änderungen in admin1.html öffnen Sie die Seite im Browser. Klicken Sie nun zum Beispiel auf den Dialog für Bild einfügen, sehen Sie einen weiteren Tab für Hochladen und die jeweiligen Buttons, die das entsprechende Skript ansprechen sollen. Die Einbindung ist also denkbar einfach. Lediglich die Pfade zu Ihren Scripten müssen Sie anpassen.

Fazit

Mit dem CKEditor ist dank konsequenter Neuentwicklung ein großer Wurf gelungen, und auch die Möglichkeiten der Konfiguration sind deutlich besser und einfacher gestaltet als bei seinem Vorgänger. Es wird nicht lange dauern, dann werden auch Plugins von Dritten zur Verfügung stehen. Aufgrund des spürbaren Performancegewinns ist der Editor derzeit allererste Wahl, wenn es darum geht WySiWyg für die Texteingabe zu nutzen.