CKEditor-Skins austauschen (mit Drupals WYSIWYG)
CKEditor 4.x ist schon eine Weile verfügbar. Etwas, das mir daran besonders gut gefällt, ist das neue Design, für das die Leute von CKEditor einen Contest hatten. Moono wurde als neues Design ausgewählt, aber mir persönlich gefällt auch das Design von silver sehr gut. Heute soll es hier also darum gehen, wie man ein anderes Design (in CKEditor heißt das Skin) einsetzt, wenn man CKEditor 4.x in Drupal verwendet. Auf ckeditor.com gibt es eine Übersicht für skins, viel ist da allerdings noch nicht zu sehen. Moonocolor sieht auch noch gut aus, aber für diesen Beitrag konzentrieren wir uns auf silver, was man sich auf Github runterladen kann.
Ich zeige hier, wie man das mit ein paar wenigen Zeilen Code hinkriegt (den stBorchert für mich geschrieben hat :)) und hänge ein fertiges Feature-Modul an, das ihr einfach runterladen und aktivieren könnt, um das Ganze in Aktion zu sehen (denkt dran, vorher zur Sicherheit ein Datenbank-Backup zu machen!)
Annahmen
- Du hast WYSIWYG 7.x-2.x-dev installiert (liegt in sites/all/modules/contrib)
- Du hast CKEditor 4.1.2 installiert (liegt in sites/all/libraries)
Hier der Code, der in deinem eigenen Modul in der .module-Datei liegt:
- <?php
- /**
- * Implements hook__wysiwyg_editor_settings_alter().
- */
- function MODULENAME_wysiwyg_editor_settings_alter(&$settings, $context) {
- global $base_url;
- if ($context['profile']->editor == 'ckeditor') {
- $skins_path = drupal_get_path('module', 'MODULENAME') . '/ckeditor/skins';
- // For flexibility we use a variable to get the active skin name.
- $active_skin = variable_get('MODULENAME_skin', 'silver');
- // Set custom skin.
- $settings['skin'] = sprintf('%s,' . '%s/%s/%s/', $active_skin, $base_url, $skins_path, $active_skin);
- }
- }
Ich habe für euch ein WYSIWYG feature vorbereitet, das mein eigenes Modul darstellt und mein Textformat, dessen WYSIWYG-Einstellungen und die silver skin enthält. Sofern das WYSIWYG-Modul und CKEditor installiert sind (siehe den Punkt "Annahmen"), dann könnt ihr mein Feature einfach runterladen und wie ein normales Modul aktivieren. Ich habe ein eigenes Textformat angelegt, damit es nicht mit euren eventuell existierenden Textformaten (wie Full HTML und Filtered HTML) kollidiert. Die Einstellungen des Textformats sind analog zum Format Filtered HTML. In der .module-Datei meines Features ist der Code von oben in den Namensbezeichnungen auf mein Modul angepasst. Mein Modul enthält auch eine README.txt, die die Anforderungen noch mal zusammenfasst. Sobald das Feature-Modul aktiviert ist, könnt ihr einfach neuen Inhalt anlegen, das Textformat auf undpaul WYSIWYG setzen und das Ergebnis bewundern.
Download
Hier kriegt ihr das Feature-Modul zum Ausprobieren.
Ergebnis
Und so sollte es dann aussehen:
Viel Spaß beim Ausprobieren!
