Ckeditor als WordPress-Plugin

Der Standard-Editor aktuellerer WordPress-Installationen ist der TinyMCE. Wer WordPress als Blogsystem einsetzt, mag mit dem Funktionsumfang und den Standardeinstellungen des TinyMCE auskommen und mit der Einfachheit der Möglichkeiten restlos zufrieden sein. Wer höhere Ansprüche hat, um in die Gestaltung des Contents einzugreifen, wird nicht umhinkommen den TinyMCE anzupassen oder auf einen alternativen Editor auszuweichen. Wer also WordPress als Content-Management-System einsetzen will sollte den legendären FCKEditor, der mittlerweile in CKEditor umbenannt wurde, von Frederico Knabben in Erwägung ziehen.

Der CKEditor ist ein WYSIWYG-Text-Editor. Das bedeutet, dass das Layout der Texte und sonstigen Gestaltungselemente, während des Bearbeitungsgangs annähernd so aussehen, wie das  publizierte Endergebnis. Um die Handhabbarkeit zu erhöhen lehnt sich CKEditor dabei bewusst an Desktop-Texteditoren wie Microsoft Word® oder OpenOffice® an.

Der CKEditor wird sowohl unter diversen Open Source Lizenzen (GPL, LGPL and MPL), als auch einer kommerzielle Lizenz angeboten. Seit 2003 erfreut sich der FCKEditor, wegen seiner Leistungsfähigkeit, Zugänglichkeit und Handhabbarkeit großer Beliebtheit. Neben der Möglichkeit den Editor manuell in nahezu jede beliebige Web-Applikation zu integrieren, gibt es zahlreiche fertige Lösungen. Als mein persönlicher Favorit und Lieblingsedtior verwende ich den FCKEditor in kleineren dateibasierten-CMS-Systemen, aber auch in datenbankgestützten CMS's (Joomla, Contenido und Magentocommerce). Seit neuestem integrieren wir auf Kundenwunsch Dean's FCKEditor-Plugin für WordPress (z.Zeit die Version 3.3). Gegenüber der Originalversion des CKEditors stellt Dean's Plugin ein paar nützliche wordpress-typische Erweiterungen gleich mit zur Verfügung.

Der Einsatz des Plugins ist so einfach wie man es für WordPress-Plugins gewohnt ist. Zunächst wird das Plugin heruntergeladen, entpackt und in das Plugin-Verzeichnis verschoben. Anschließen wird im Backend von WordPress das Plugin aktiviert.

Im Prinzip wäre CKEditor jetzt voll einsetzbar. Allerdings sollte man überprüfen, ob alle bereitgestellten Funktionen sinnvoll sind. Im Dashboard – unter "Einstellungen" gibt es die Möglichkeit etwas Feintuning zu betreiben.

Individuelle Anpassungen

Beispielhaft soll das Plugin jetzt an die eigenen Bedürfnisse angepasst werden. Wir gehen dabei intuitiv vor und passen den Editor Schritt für Schritt an. Wesentliche Veränderungsmöglichkeiten ergeben sich über den Navigationspunkt "Einstellungen >> FCKEditor" im Backend von WordPress. Zunächst passen wir die Darstellungshöhe des Editors an. Aus Komfortgründen verändern wir für den Backend-Editor die Grundeinstellung von 300 px Höhe auf 600 px. Für den Kommentar-Editor behalten wir die Höhe 120 px bei. Die nächste Baustelle ist die sog. Toolbar – Selection.

a) Toolbar-Selection
So stellt sich die Toolbar-Selection in der Plugin-Grundeinstellung dar:
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','-','wpMore'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']

In der Grundeinstellung der Werkzeugleiste stellt der CKEditor die Funktionen: Speichern, Neue Seite, Vorschau und Template zur Verfügung (vgl. die rot markierten Funktionen). Da diese Funktionen besser von WordPress erledigt werden können, sollten Sie aus dem Fokus des Editors genommen werden. Dies geschieht quasi durch „Entwerten“ von 4 Positionen in der ersten Zeile.

ersetze: ['Source','-','Save','NewPage','Preview','-','Templates'],  
durch: ['Source','-','-','-'-','-','-'],

Diese Einstellungen können alternativ auch direkt in der Datei deans_fckeditor_class.php angepasst werden.

b) Image-Verzeichnis
Die nächste Baustelle ist das Medienverzeichnis. Prinzipiell können unterschiedlichste Medientypen über den Editor hochgeladen werden. Die Frage ob es sinnvoller ist dafür den Editor zu benutzen oder dies zentral über die Mediathek zu erledigen soll gleich noch besprochen werden. Zunächst passen wir den Pfad zum Upload-Verzeichnis an, um vom Editor aus Zugriff auf die Medien zu erhalten. Wir setzen den Editor-Upload-Pfad auf das gleiche Verzeichnis wie die Mediathek (also: wp-content/uploads). Dies können wir wieder direkt über Einstellungen erledigen oder in der Datei: deans_fckeditor_class.php. Nun ist es aber so,  dass der Editor dort automatisch ein Unterverzeichnis anlegt (z.B. für Bilder: /images) von dem man aus keine höheren Ebenen erreichen kann. Dies ist von Nachteil, weil man in diesem Fall keine direkte Zugriffsmöglichkeit auf die Bilder aus der Mediathek hat. Um diesen Nachteil zu umgehen greifen wir direkt in die Datei: /filemanager/connectors/php/config.php ein.

ersetze:
$Config['FileTypesPath']['Image']= $Config['UserFilesPath'] . 'images/' ;
$Config['FileTypesAbsolutePath']['Image']= ($Config['UserFilesAbsolutePath'] == '') ? '' : $Config['UserFilesAbsolutePath'].'images/' ;

durch:
$Config['FileTypesPath']['Image']= $Config['UserFilesPath'] . '' ;
$Config['FileTypesAbsolutePath']['Image']= ($Config['UserFilesAbsolutePath'] == '') ? '' : $Config['UserFilesAbsolutePath'].'' ;

Die gleiche Veränderung kann auch für file/, flash/ und media/ durchgeführt werden. Nach dieser Anpassung haben wir Zugriff auf das gesamte Medienverzeichnis.

Nun wenden wir uns der Fragestellung zu, ob es sinnvoll ist Bilder u.a. Medien über über den Editor hochzuladen. Die Antwort lautet: Das kommt darauf an! Für meinen Geschmack bietet die Mediathek einige Vorteile. Mit der Mediathek lassen sich Medien verwalten, und ggf. löschen. Da sie über die Datenbank gesteuert ist, fallen alle Bilder, die über den Editor hochgeladen werden aus dem Fokus der Mediathek. Es scheint, als ob die Bilder für die Mediathek nicht existieren würden, man hat dann keinen Lösch-Zugriff auf sie. Meine Empfehlung lautet deshalb: Arbeite entweder mit dem einem System oder dem anderen. Ich habe mich dafür entschieden generell alle Dateien via Mediathek bereitzustellen. Aus diesem Grund passe ich den Editor entsprechend an und verweigere ihm die Möglichkeit Dateien hochzuladen. Im Prinzip hat auch der Editor diese Frage pro Mediathek entschieden, oberhalb des Editors stellt das Plugin die Medienleiste (Add media bzw. in der deutschen Version: ) zur Verfügung. Um aber aus dem Editor den „Upload“ und „Create Folder“ zu verhindern greife ich bei folgenden Dateien in den Programm-Code ein:

I. Create Folder deaktivieren in der Datei: /filemanager/browser/default/frmcreatefolder.html
ersetze:
<td>
<button type="button" style="WIDTH: 100%" onclick="CreateFolder();">
    <table cellSpacing="0" cellPadding="0" border="0"><tr>
        <td><img height="16" alt="" src="images/Folder.gif" width="16"></td>
        <td>&nbsp;</td>
        <td nowrap>Create New Folder</td>
    </tr></table>
</button>

durch:
<td>&nbsp;
<!–
<button type="button" style="WIDTH: 100%" onclick="CreateFolder();">
    <table cellSpacing="0" cellPadding="0" border="0"><tr>
        <td><img height="16" alt="" src="images/Folder.gif" width="16"></td>
        <td>&nbsp;</td>
        td nowrap>Create New Folder</td>
    </tr></table>
</button>
–>

II. Standard-Editor-Upload deaktivieren: /filemanager/browser/default/frmupload.html
mit folgenden Anpassungen:
ersetze:
document.getElementById('eUploadMessage').innerHTML = 'Upload a new file in this folder (Upload in progress, please wait…)' ;
durch:
document.getElementById('eUploadMessage').innerHTML = 'Dateiupload des Editors ist deaktiviert. Benutzen Sie bitte die Mediathek-Funktionen!' ;

ersetze:
document.getElementById('eUploadMessage').innerHTML = 'Upload a new file in this folder' ;
document.getElementById('btnUpload').disabled = false ;

durch:
document.getElementById('eUploadMessage').innerHTML = 'Dateiupload des Editors ist deaktiviert. Benutzen Sie bitte die Mediathek-Funktionen!' ;
document.getElementById('btnUpload').disabled = true ;

ersetze:
<form id="frmUpload" action="" target="frmUploadWorker" method="post" enctype="multipart/form-data" onsubmit="return OnSubmit();">
    <table height="100%" cellspacing="0" cellpadding="0" width="100%" border="0"><tr>
        <td nowrap>span id="eUploadMessage">Upload a new file in this folder</span><br>
    <table cellspacing="0" cellpadding="0" width="100%" border="0"><tr>
        <td width="100%"><input id="NewFile" name="NewFile" style="WIDTH: 100%" type="file"></td>
        <td nowrap>&nbsp;<input id="btnUpload" type="submit" value="Upload"></td>
        </tr></table>
            </td>
        </tr></table>
</form>

durch*:
<form id="frmUpload" action="" target="frmUploadWorker" method="post" enctype="multipart/form-data" onsubmit="return OnSubmit();">
    <table height="100%" cellspacing="0" cellpadding="0" width="100%" border="0"><tr>
        <td nowrap>&nbsp; <a href="http://IHREINTERNETSEITE/wp-admin/media-new.php" target="_blank">Um  Dateien hochzuladen benutzen Sie bitte die Mediathek-Funktionen</a> </td>
    </tr></table>
</form>

*) dies verlinkt auf die Mediathek.

III.Aktionen jetzt noch explizit verbieten: /filemanager/connectors/php/config.php
ersetze:
$Config['ConfigAllowedCommands'] = array('QuickUpload', 'FileUpload', 'GetFolders', 'GetFoldersAndFiles', 'CreateFolder') ;
durch:
$Config['ConfigAllowedCommands'] = array('GetFolders', 'GetFoldersAndFiles') ;

c) Individualisierung
I. Frontend-CSS als Editor-CSS verwenden
Falls die eigene style.css auf den Editor angewendet werden soll, kann dies auf einfache Weise über die Datei: deans_fckeditor_class.php geschehen. Das Vorgehen ist quick & dirty und es gibt sicher elegantere Wege, um die Frontend-CSS  in den Editor zu integrieren, aber der vorgeschlagene Weg führt zum Ziel.
direkt hinter:
CKEDITOR.replace('<?php echo $textarea_id;?>',{
<?php eval('?>'.file_get_contents(dirname(__FILE__).'/custom_config_js.php')) ?> });

dies einfügen:
CKEDITOR.config.contentsCss = 'HIER KOMMT DER FOLSTÄNDIGE PFAD ZUR CSS-DATEI HIN'; (z.B.: 'http://www.2bee.de/wp-content/themes/2BEE/style.css'; )

II. eingebettete CSS anpassen:
Die Datei /ckeditor/plugins/stylecombo/styles/default.js wird über ckeditor.js via stylesCombo_stylesSet='default' und /ckeditor/plugins/stylecombo/plugin.js via CKEDITOR.config.stylesCombo_stylesSet='default'; angesteuert.

In der Datei /ckeditor/plugins/stylecombo/styles/default.js befinden sich die Stile, die im Editor über die Dropdown-Funktion angezeigt werden können. In der Default-Einstellung sind dies:
CKEDITOR.addStylesSet('default',[{name:'Blue Title',element:'h3',styles:{color:'Blue'}},{name:'Red Title',element:'h3',styles:{color:'Red'}},{name:'Marker: Yellow',element:'span',styles:{'background-color':'Yellow'}},{name:'Marker: Green',element:'span',styles:{'background-color':'Lime'}},{name:'Big',element:'big'},{name:'Small',element:'small'},{name:'Typewriter',element:'tt'},{name:'Computer Code',element:'code'},{name:'Keyboard Phrase',element:'kbd'},{name:'Sample Text',element:'samp'},{name:'Variable',element:'var'},{name:'Deleted Text',element:'del'},{name:'Inserted Text',element:'ins'},{name:'Cited Work',element:'cite'},{name:'Inline Quotation',element:'q'},{name:'Language: RTL',element:'span',attributes:{dir:'rtl'}},{name:'Language: LTR',element:'span',attributes:{dir:'ltr'}},{name:'Image on Left',element:'img',attributes:{style:'padding: 5px; margin-right: 5px',border:'2',align:'left'}},{name:'Image on Right',element:'img',attributes:{style:'padding: 5px; margin-left: 5px',border:'2',align:'right'}}]);

Die Anpassung erfolgt dabei auf einfache Weise durch Anpassung der Array-Parameter: z.B.:
CKEDITOR.addStylesSet('default',[{name:'zweiter Titel',element:'h2'},{name:'Big',element:'big'},{name:'Small',element:'small'},{name:'Zitieren',element:'span',attributes:{style:'font-family: georgia,serif; font-style: italic; font-variant: normal; font-weight: bold; font-size: 14px; line-height: normal; color: rgb(20, 128, 150); text-align: left; font-size-adjust: none; font-stretch: normal;'}},{name:'wie Kathrin',element:'span',attributes:{style:'font-family: Georgia,serif; font-style: italic; font-variant: normal; font-weight: bold; font-size: 22px; line-height: normal; font-size-adjust: none; font-stretch: normal;'}},{name:'Anfuehrungszeichen',element:'q'}]);

Was dabei im Einzelnen zu beachten ist, wird in der Dokumentation des CKEditors näher erläutert (vgl. http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles)

[möglicherweise muss noch der Browser-Cache gelöscht werden, um die Wirkung unmittelbar zu sehen]

 

Hier noch die Download:

Hinweis:
Falls Sie nach der Aktivierung des CKEditors Probleme mit dem Abspeichern von Texten haben, dann sollten Sie in der Benutzerverwaltung die Verwendung des WYSIWYG-Editors deaktiveren. Dies sollte paradoxerweise das Problem lösen.

Visueller Editor

DAS SAGT DIE WELT

COMPANY CUSTOMER PACT

ein Herz für unsere KundenWir glauben an gute Kundenbeziehungen und offene Kommunikation miteinander.