Zum Inhalt

CKEditor-Addon für REDAXO konfigurieren

Der CKEditor ist ein sehr flexibler Texteditor den man exakt auf die jeweilige Situation anpassen kann, so auch in REDAXO mit dem CKEditor-Addon. Er kann ohne grossen Aufwand mit weiteren Plugins ergänzt werden um den Funktionsumfang zu erweitern. Kann jedoch bei Bedarf auch auf das nötigste reduziert werden. Das CKEditor-Addon von RexDude integriert diesen praktischen Editor in das CMS REDAXO. Das Addon beinhaltet zwei Module die man direkt einsetzen kann oder bei Bedarf erweitert. In diesem Beitrag hier wird gezeigt was alles möglich ist, für alle diejenigen die den Editor noch weiter ausschöpfen wollen.

Verwendete Systeme

  • CKEditor 4.3.2 Standard
  • CKEditor Addon 2.1
  • REDAXO 4.5.1

Das CKEditor-Addon Konfiguration

CKEditor-Addon Verzeichnis-Struktur

Die Konfiguration des CKE basiert auf zwei Schritten. Beim Aufruf des Editors wird als erstes wird die config.js aus dem Addon-Ordner geladen, danach die Einstellungen im Modul. Was alles möglich ist, ist in der Api-Dokumentation des CKEditors zu finden. Zu beachten ist die unterschiedliche Schreibweise:

// in der config.js (object.propertie)
config.height = 400;

// im Modul (object initializer)
height: 400

Theoretisch kann im REDAXO-Modul alles definiert werden was gebraucht wird. Nutzt man vielleicht mehrere Module mit dem CKE, kann es Sinn machen Einstellungen die sich wiederholen, also in allen Editor-Modulen genutzt werden, zentral in der config.js zu definieren.

Updatefähig bleiben

Um später das CKEditor-Addon unbesorgt updaten zu können lagern wir die config.js aus. In den folgenden Beispielen wird von einer Verzeichnisstruktur wie auf dem Bild rechts ausgegangen.Es handelt sich hierbei nur um ein Beispiel. Jeder kann seine Verzeichnisstruktur selber wählen. Vorteil dieser Methode ist, dass alle Daten ausserhalb von REDAXO liegen und bei einem Update unberührt bleiben. Wie man sieht wird hier noch mehr ausgelagert als nur eine Konfigurationsdatei – dazu später mehr.

Die Konfigurations-Datei

Hier als erstes die Konfigurations-Datei aus unserem Beispiel.

Pfad: /_data/cke/myConfig.js

// Pfad festlegen
var myCKE_Path = '/_data/cke/';

// zusätzliche Plugins hinzufügen -> unter extraPlugins und in der Toolbar noch eintragen
CKEDITOR.plugins.addExternal('templates', myCKE_Path + 'plugins/templates/');
CKEDITOR.plugins.addExternal('find', myCKE_Path + 'plugins/find/');
CKEDITOR.plugins.addExternal('codemirror', myCKE_Path + 'plugins/codemirror/');
CKEDITOR.plugins.addExternal('showblocks', myCKE_Path + 'plugins/showblocks/');
CKEDITOR.plugins.addExternal('backup', myCKE_Path + 'plugins/backup/');
CKEDITOR.plugins.addExternal('smiley', myCKE_Path + 'plugins/smiley/');
CKEDITOR.plugins.addExternal('htmlwriter', myCKE_Path + 'plugins/htmlwriter/');
CKEDITOR.plugins.addExternal('menubutton', myCKE_Path + 'plugins/menubutton/');
CKEDITOR.plugins.addExternal('scayt', myCKE_Path + 'plugins/scayt/');
CKEDITOR.plugins.addExternal('elementspath', myCKE_Path + 'plugins/elementspath/');

// Konfiguration
CKEDITOR.editorConfig = function(config) {

    // zusätzliche Plugins einbinden
    config.extraPlugins = 'rex_help,templates,find,codemirror,showblocks,backup,smiley,htmlwriter,menubutton,scayt,elementspath';
    config.removePlugins = '';

    // CKE-UI konfigurieren
    config.skin = 'moonocolor,' + myCKE_Path + 'skins/moonocolor/';
    config.height = 400;
    config.width = 700;
    config.uiColor = "#aaaaaa";
    config.resize_enabled = true;
    config.resize_dir = 'both';
    config.toolbarCanCollapse = true;
    config.removeDialogTabs = '';
    config.colorButton_enableMore = false;
    
    // Templates einbinden - benötigt das Templates-Plugin
    config.templates_files = [myCKE_Path + 'templates/default.js'];
    config.templates_replaceContent = false;

    // CKE Formate definieren
    config.format_tags = 'p;h3;h4;pre';

    // Eigene Styles einbinden und CSS dazu laden
    config.stylesSet = [];
    config.stylesSet = 'default:' + myCKE_Path + 'styles/default.js';
    config.contentsCss = [myCKE_Path + 'css/style.css'];

    // CKE Verhalten konfigurieren
    config.fillEmptyBlocks = true;
    config.forcePasteAsPlainText = true;
    config.entities = false;
    
    // Rechtschreibung prüfen - Plugin scayt,menubutton erforderlich
    config.scayt_autoStartup = true;
    config.scayt_sLang ="de_DE";
    config.scayt_moreSuggestions = 'on';
    config.scayt_contextCommands = 'add|ignoreall';

    // Toolbar default
    config.toolbar = [
        ['Save', 'NewPage', 'Preview', 'Print'],
        ['Undo', 'Redo'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
        ['Find', 'Replace', '-', 'SpellChecker', 'wsc', 'Scayt', '-','SelectAll'],
        ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
        '/',
        ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language'],
        ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'],
        '/',
        ['Templates'],
        ['Styles', 'Format'],
        ['Font', 'FontSize', '-', 'TextColor', 'BGColor'],
        ['Link', 'Unlink', '-', 'Anchor'],
        ['Source', '-', 'Maximize', '-', 'ShowBlocks'],
        ['About', 'rex_help']
    ];

    // Toolbar kleiner
    config.toolbar_small = [
        ['Undo', 'Redo'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
        ['SpellChecker', '-','SelectAll', '-', 'Scayt'],
        ['Bold', 'Italic', 'Underline', '-', 'RemoveFormat'],
        ['NumberedList', 'BulletedList', '-', 'Blockquote'],
        ['Image', 'HorizontalRule', 'SpecialChar'],
        ['Templates'],
        ['Styles', 'Format'],
        ['Link', 'Unlink', '-', 'Anchor'],
        ['Source', '-', 'Maximize', '-', 'ShowBlocks'],
        ['About', 'rex_help']
    ];

    // Toolbar minimal
    config.toolbar_min = [
        ['Undo', 'Redo'],
        ['SpellChecker', '-','SelectAll', '-', 'Scayt'],
        ['Bold', 'Italic', '-', 'RemoveFormat'],
        ['Styles', 'Format'],
        ['Link', 'Unlink', '-', 'Anchor']
    ];

    config.removeButtons = ''; // Buttons entfernen

};

/*
 * einige Angaben zum output - benötigt das htmlwriter-Plugin
 */
CKEDITOR.on('instanceReady', function(ev) {

    ev.editor.dataProcessor.writer.indentationChars = '\t';
    ev.editor.dataProcessor.writer.selfClosingEnd = '>';
    ev.editor.dataProcessor.writer.lineBreakChars = '\n';

    // Zeilenumbrüche vermeiden für p-tag um den Code kompakt zu halten
    ev.editor.dataProcessor.writer.setRules('p', {
        indent: false,
        breakBeforeOpen: false,
        breakAfterOpen: false,
        breakBeforeClose: false,
        breakAfterClose: false
    });
});

Erklärung

Als erstes werden Externe Plugins hinzugefügt, dazu später mehr. Danach beginnt erst die eigentliche Konfiguration. Hierbei werden als erstes die zusätzlichen Plugins hinzugefügt, darauf folgen einige Einstellungen die das Äussere des Editors beeinflussen. Als nächstes werden Templates eingebunden (Plugin erforderlich), dazu auch später mehr. Mit “config.format_tags” bestimmen wir was im Editor unter “Format” zur Verfügung steht, mit “config.stylesSet” das was unter “Stil” auszuwählen steht, dazu später mehr. Weiter geht es mit einigen Einstellungen die das Verhalten beeinflussen und danach mit der Rechtschreib-Prüfung (Plugin erforderlich). Darauf folgen drei vorgefertigte Toolbar’s für den Editor. Ganz unten dann noch ein Beispiel wie man die Ausgabe des CKE beeinflussen kann. Nähere Erläuterung ergibt sich in den nächsten Abschnitten.

CKEditor externe Plugins

Die Plugins die in unserer Konfigurationsdatei zu sehen sind, sind alle ausgelagert ins Verzeichnis “/_data/cke/plugins/” damit wir das Addon selbst nicht verändern müssen. Wie in der Config zu sehen ist erfolgt der Aufruf so:

CKEDITOR.plugins.addExternal('templates', myCKE_Path + 'plugins/templates/');

Damit das Plugin eingebunden wird müssen wir es noch unter “config.extraPlugins” eintragen:

config.extraPlugins = 'rex_help,templates'; // mehrere Komma getrennt

Falls das Plugin einen Button braucht muss dieser eventuell noch in die Toolbar eingefügt werden. Alle verfügbaren Plugins sind unter http://ckeditor.com/addons/plugins/all zu finden. Nach dem Download erscheint immer ein Layer der Informationen enthält über den Schlüssel-Namen und eventuelle Abhängigkeiten von anderen Plugins.

Skin ändern

Unter http://ckeditor.com/addons/skins/all stehen weitere Skins zur Verfügung mit denen man das Äussere seines Editors ändern kann. Die Einbindung ist sehr einfach. Nach dem Download legen wir den Skin-Ordner in das Verzeichnis “/_data/cke/skins/” die Einbindung machen wir in der Config wie folgt:

config.skin = 'moonocolor,' + myCKE_Path + 'skins/moonocolor/';

Hierbei laden wir das Skin “Moonocolor”. Weitere Einstellungen machen wir mit:

config.height = 400; // höhe des Editors
config.width = 700; // Breite des Editors
config.uiColor = "#aaaaaa"; // Basisfabe des Editors
config.resize_enabled = true; // Änderung der Grösse erlauben
config.resize_dir = 'both'; // in beide Richtungen
config.toolbarCanCollapse = true; // Toolbar kann eingeklappt werden
config.removeDialogTabs = ''; // Falls wir Tabs aus den Dialogen entfernen möchten

Weitere Möglichkeiten findet man in der Dokumentation.

Templates einbinden

In unserer Config binden wir das Plugin “Templates” ein, welches uns ermöglicht vorgefertigte Bausteine im Editor zu nutzen. Da wir unsere Templates ausserhalb des CKEdito-Addons ausgelagert haben müssen wir sie erst einbinden.

config.templates_files = [myCKE_Path + 'templates/default.js'];
config.templates_replaceContent = false;

Es können auch mehrere Dateien eingebunden werden, dazu nach einem Komma die zweite Datei angeben. Die zweite Zeile verhindert dass beim Einfügen der aktuelle Inhalt überschrieben wird.

Nun zur eigentlichen Templates-Datei.

Pfad: /_data/cke/templates/default.js

// Template-Set namens default definieren
CKEDITOR.addTemplates('default', {
    // Der Pfad zu den Vorschaubilder
    imagesPath: '/_data/cke/templates/img/',
    // Template definitions.
    templates: [
        {
            title: 'Beispiel 1',
            image: 'template1.gif',
            description: 'Eine Beschreibung zu diesem Template.',
            html:
                    '<div class="box">' +
                    '<h4>Template 1</h4>' +
                    '<p><img src="/logo.png" style="float:left" />Text hier eingeben...</p>' +
                    '</div>'
        },
        {
            title: 'Beispiel 2',
            image: 'template2.gif',
            description: 'Eine Beschreibung zu diesem Template.',
            html:
                    '<h2>Template 1</h2>' +
                    '<p>\n\<img src="/logo.png" style="float:left" />Text hier eingeben...</p>'
        },
        {
            title: 'Beispiel 3',
            html:
                    '<h3>Eine Überschrift</h3>' +
                    '<p>Text hier eingeben...</p>'
        }
    ]
});

Zu jedem Template kann ein Vorschaubild angegeben werden, sowie eine Beschreibung. Plicht ist aber nur der Titel und der HTML-Teil. Die Templates stehen dann über den Button “templates” in der Toolbar zur Verfügung.

Eigene Styles einbinden

Die Styles können natürlich auch nur im Modul festgelegt werden, hier im Beispiel legen wir sie aber in einer externen Datei ab. Später im Modul können immer noch weitere Styles hinzugefügt werden. Genau hier liegt die wunderbare Flexibilität des CKEditor-Addon.

Pfad: /_data/cke/styles/default.js

// Styles definieren
CKEDITOR.stylesSet.add('default', [
    // Block Styles
    {name: 'Schwarzer Titel', element: 'h3', attributes: {class: 'black'}},
    {name: 'Weisser Titel', element: 'h3', attributes: {class: 'white'}},
    {name: 'Listen-Box', element: 'ul', attributes: {class: 'list_box'}},
    {name: 'Markierte Zelle', element: 'td', attributes: {class: 'marker-cell', style: 'background:#ccc'}},
    // Inline Styles
    {name: 'Link-Button', element: 'a', attributes: {class: 'button'}},
    {name: 'Markiert', element: 'span', styles: {'background-color': 'Lime'}},
    // Object Styles
    {
        name: 'Box links',
        element: 'div',
        attributes: {
            style: 'margin: .5em .5em .5em 0; float:left',
            border: '0'
        }
    }
]);

Das Beispiel erklärt wie die einzelnen Styles definiert werden. Alles was hier definiert ist steht dann im Editor unter “Stil” zur Auswahl wenn das entsprechende Element markiert bzw. fokussiert ist.

CSS einbinden

Damit im Editor möglichst alles bereits so aussieht wie später bei der Veröffentlichung auf der Website und damit unsere Styles auch sichtbar werden, binden wir noch unsere CSS-Formatierungen ein.

config.contentsCss = [myCKE_Path + 'css/style.css'];

Damit laden wir unsere CSS-Datei aus dem Verzeichnis /_data/cke/css/style.css

/* Style aus dem Frontend laden */
@import url('/_data/css/styles.css');

/* Korrekturen für die Darstellung im CKE falls nötig */
div {}

In dieser Datei binden wir mit @import die CSS der Website ein. Darunter können wir gleich die Korrekturen für die Ansicht im Editor machen. Da im Editor nicht die gesamte HTML-Struktur der Website abgebildet wird ist meist eine Korrektur nötig, dies hängt natürlich auch von den CSS-Formatierungen ab.

Das REDAXO Modul

Nun können wir unsere Konfigurationen im Modul laden. Folgender Code in der Modul-Eingabe reicht aus um unsere Konfiguration zu laden:

<textarea id="ckeditor1" class="ckeditor" name="VALUE[1]" style="display: none;">REX_VALUE[1]</textarea>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        CKEDITOR.replace('ckeditor1', {
            customConfig: '/_data/cke/myConfig.js'
        });
    });
</script>

Bei Bedarf können wir auch noch weitere Einstellungen für das CKEditor-Addon vornehmen:

<textarea id="ckeditor1" class="ckeditor" name="VALUE[1]" style="display: none;">REX_VALUE[1]</textarea>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        CKEDITOR.replace('ckeditor1', {
            
            customConfig: '/_data/cke/myConfig.js',
            
            // unsere Toolbar "small" laden
            toolbar: 'small',
            
            // eventuell die Grösse ändern
            height: 300,
            
            // andere Styles definieren falls nötig
            stylesSet: [
                {name: 'Spezial-Button', element: 'a', attributes: {class: 'spez-button'}},
                {name: 'umrandet', element: 'span', attributes: {style: 'border:1px solid #ccc;'}}
            ],
            
            // eventuell noch ein paar Buttons entfernen
            removeButtons: 'Source,Maximize',
            
            // ein paar Angaben was erlaubt ist
            allowedContent: {
                img: {styles: 'float'},
                a: {attributes: '!href', classes: 'button'},
                p: {classes: 'info,warning'}
            }
            
        });
    });
</script>

Hoffentlich konnte man erkennen wie wunderbar sich das CKEditor-Addon in REDAXO konfigurieren lässt.

Weiterführende Links:

Veröffentlicht inLösungen

Neueste Beiträge

Themen: