WordPress Plugin WP-Filebase: Custom Fields mit Rich Text Editor (WYSIWYG) anstatt Textarea-Feld

WP-Filebase Adminumgebung mit CKEditor

Screenshot: WP-Filebase Adminumgebung. Die Custom Fields sind mit CKEditor als Rich Text editierbar

Das Plugin WP-Filebase Download Manager für WordPress  ist ganz hervorragend, um Dokumente in WordPress zu verwalten, zum Download bereitszustellen, als sortierbare Fileliste, durchsuchbar mit Meta-Stichworten etc. Die Homepage des Entwicklers (vielen Dank auch ihm dafür): http://fabi.me/wordpress-plugins/wp-filebase-file-download-manager/

Im Admin-Bereich des Plugins kann man sich unter Einstellungen / Formularvorgaben eigene Felder definieren, um zu den Dateien z.B. Beschreibungen oder andere Anmerkungen hinzuzufügen. Diese Felder können in der Tabellen-Darstellung im FrontEnd als separate Spalten angezeigt werden. Man kann in diese Felder auch HTML-formatierten Text eingeben. Allerdings muss man dazu mühsam von Hand in HTML formatieren. Besser wäre hier ein Rich Text Editor.

WYSIWYG-Editoren (oder auch Rich Text Editoren) wie CKEditor oder TinyMCE sind frei verfügbar und leicht zu implementieren. Man kopiert per FTP das Verzeichnis mit allen Daten dieser Tools auf den eigenen Webserver in das htdocs-Verzeichnis (also das Verzeichnis, welches für die Bereitstellung der Webinhalte konfiguriert ist, kann auch „htm“ oder „html“ heissen, je nach Provider/Hoster). Man kann diese Editoren so nutzen, dass man ein Textarea-Feld eines HTML-Formulars problemlos durch einen solchen Editor ersetzen kann. Somit kann man den Inhalt von Textfeldern mit HTML formatieren, ohne HTML-Code direkt eingeben zu müssen. Die Editoren wandeln den formatierten Text in HTML um.

Es genügt, eine Javascript-Datei im Kopf (<head>) der Webseite einzubinden und dem Textarea-Feld die Klasse ckeditor zuzuweisen. Hier stellt sich nur das Problem, die richtigen Dateien zu finden, um dies zu tun. Denn in komplexen CMS wie WordPress besteht eine „Seite“ aus vielen vielen Template, Plugins, Scripten etc.

Hier der Weg:

Am Beispiel mit dem CKEditor: CKEditor downloaden und dann auf den eigenen Webserver hochladen (installieren). Hier zum Beispiel liegt alles im Verzeichnis /ckeditor.

Das Plugin WP-Filebase Download Manager muss nach der Installation in WordPress an zwei Stellen manipuliert werden:

1. Hinzufügen des Klassen-Attributs mit Wert „ckeditor“ im Textarea Feld

/wordpress/wp-content/plugins/wp-filebase/lib/wpfb_form_file.php
Zeile 331

<tr>
<th scope=“row“ valign=“top“><label for=“<?php echo $hid; ?>“><?php echo esc_html($cn) ?></label></th>
<td colspan=“3″><textarea name=“<?php echo $hid; ?>“ id=“<?php echo $hid; ?>“ class=“ckeditor“  rows=“2″ cols=“50″ style=“width: 97%;“><?php echo empty($file->$hid) ? “ : esc_html($file->$hid); ?></textarea></td>
</tr>

2. Einbinden des CKEditor-Scripts

/wordpress/wp-admin/admin-header.php
Zeile 96

<script src=“/ckeditor/ckeditor.js“></script>
</head>

Der Pfad zu der JavaScript-Datei ckeditor.js kann absolut oder relativ angegeben werden.

Nach diesen Schritten einfach im Admin-Bereich des WP-Filebase Download Manager die Seite zum Anlegen oder Bearbeiten eines Dokumentes neu laden.

Nun wird bei den selbst definierbaren Feldern (Custom Fields) an Stelle der simplen Texteingabe-Box (textarea) ein Rich Text Editor verwendet.