Hier können natürlich auch weitere Regeln eingefügt oder der reguläre Ausdruck entsprechen Ihrer Anforderung angepasst werden.
Viel Spaß beim Customizing!
CKEditor Customizing
21.09.2016 09:59
CKEditor ist ein im Web weit verbreiteter WYSIWYG-Editor ("what you see is what you get"), welcher sich sehr flexibel an die Bedürfnisse eines Projekts anpassen lässt. In diesem Blogpost möchte ich kurz einige Anpassungen beleuchten, welche vielleicht auch Ihnen bei Ihren Projekten weiterhelfen können.
Lange Texte im Editor
In einem unserer Projekte ist die Anforderung, dass über den CKEditor relativ lange Texte eingegeben werden müssen. Dies ist an sich kein Problem, allerdings erhält man damit unter umständen zwei Scrollbars - eine im Editor und eine für die gesamte Seite. Gerade im Zeitalter von Touchscreens eine unschöne Sache.
Abhilfe schafft hier das Plugin Autogrow, welches den Editor mit dem Inhalt wachsen lässt. Nach dem herunterladen und hinzufügen muss es nur noch in der config-Datei aktiviert werden. Standardmäßig reagiert das Plugin erst, sobald der Editor im Fokus ist. Will man jedoch, dass dies direkt bei Seitenaufbau passiert, zum Beispiel weil der Editor mit Inhalt gefüllt wird, kann dies ebenfalls in der Config angepasst werden.
config.extraPlugins = 'autogrow';
config.autoGrow_onStartup = true;
Nun wächst der Editor wie gewollt mit dem Inhalt mit, jedoch verliert sich die Toolbar am oberen Rand. Soll etwas editiert werden muss erst wieder ganz nach oben gescrollt werden. Unschön!
Hierfür haben wir zwei Lösungsansätze gefunden: entweder die Toolbar mitscrollen lassen oder eine Toolbar bei Bedarf einblenden, sobald der Nutzer einen Bereich markiert.
Für die erste Variante existiert das Plugin Fixed, welches jedoch ohne Anpassungen in unserem Fall nicht korrekt funktioniert (beim Scrollen verschob sich die Position der Toolbar). Nichts, was sich nicht richten ließe, aber in unseren Projekten wollen wir externe Plugins möglichst nicht verändern, um spätere Updates problemlos durchführen zu können.
Umgesetzt haben wir die zweite Option mittels des Plugins Floating-Tools. Es hat eine Abhängigkeit zu Editor Toolbar, diesen Plugin ist aber standardmäßig in alles Presets des Builders enthalten, sodass keine weiteren Schritte nötig sind. Die Toolbar von Floating-Tools kann unabhängig von der Haupttoolbar konfiguriert werden, übernimmt aber deren Aussehen.
config.extraPlugins = 'autogrow,floating-tools';
config.floatingtools = 'Basic';
config.floatingtools_Basic =
[
['Bold', 'Italic', 'Underline', 'Subscript','Superscript','SpecialChar', '-',
'JustifyLeft','JustifyCenter','JustifyRight', '-',
'NumberedList', 'BulletedList', 'Outdent','Indent', '-', 'Table', 'Image']
];
Soll das Plugin nicht in alles Instanzen des CKEditors aktiv sein, so kann man es auch lokal aktivieren. Hier müssen alle zusätzlichen Plugins angegeben sein, da dieser Parameter extraPlugins aus der config-Datei überschreibt.
CKEDITOR.replace( 'editor1', {
extraPlugins: 'autogrow,floating-tools'
} );Nun lässt sich vernünftig mit langen Texten arbeiten.
Paste from Word
Eine weitere Anforderung ist die Möglichkeit Texte aus Word in den Editor zu kopieren. Um ungewünschte Formatierung zu vermeiden gibt es hierfür das Paste From Word Plugin, welches an sich gute Arbeit leistet. Was das Plugin allerdings nicht bewerkstelligt, ist leere Paragraphen und alleinstehende Leerzeichen zu unterdrücken. Außerdem werden Einrückungen über inline-Style mit margin-left bewerkstelligt. Dies tut CKEditor selbst auch, aber aus Word eingefügte Einrückung verwendet cm und der Editor erwartet px, sodass solche Einzüge über die graphische Oberfläche nicht mehr editiert werden können.
Um dem entgegenzuwirken haben wir in der Config für paste-Events Regeln definiert, welche eben jene Zeichenketten erkennen und ersetzen. In unserem Fall löschen wir neben leeren Paragraphen und Leerzeichen alle inline-Styles - genauer genommen finden wir diese Fälle und ersetzen sie mit einer leeren Zeichenkette.
CKEDITOR.on('instanceReady', function(ev) {
ev.editor.on('paste', function(evt) {
evt.data.dataValue = evt.data.dataValue.replace(/ /g,'');
evt.data.dataValue = evt.data.dataValue.replace(/<p><\/p>/g,'');
evt.data.dataValue = evt.data.dataValue.replace(/style="[^"]*"/g,'');
console.log(evt.data.dataValue);
}, null, null, 9);
});
