Word-Müll bei copy&paste im CKeditor vermeiden

Word-Müll bei copy&paste im CKeditor vermeiden

Der Einsatz von WYSIWYG-Editoren erleichtert das Schreiben von Beiträgen für eine Webseite deutlich. Und erlaubt auch Anwendern, die keine HTML-Kenntnisse besitzen, ihre Beiträge zu gestalten. Allerdings gibt es einen Stolperstein, der dazu führen kann, dass der erstellte Beitrag auf der Webseite anders aussieht als erwartet. Die Ursache liegt oft darin, dass Beiträge z.B. mit Microsoft Word vorgeschrieben und dann per copy&paste (unter Windows z.B. Strg-C und Strg-V) direkt in das Eingabefenster des CKeditors kopiert werden. Im schlimmsten Fall kann solcher Text dafür sorgen, dass eine Webseite komplett unbrauchbar wird, so wie in diesem Beispiel bei einer Joomla-Seite. Um das zu Vermeiden, sollte man aus Word kopierte Texte daher immer über den Button "aus MS-Word einfügen"  in seinen Beitrag kopieren (der rot umrandete Button).


CKeditor-Button "Aus MS-Word einfügen"


Leider besteht immer die Gefahr, dass User dies vergessen und aus Gewohnheit zu Strg-V greifen. Damit landet dann unsichtbarer Quellcode in dem Beitrag. Um dies zu vermeiden kann man in der Konfigurationsdatei von CKeditor das Einfügen von Texten im Plain-Text-Format erzwingen. Dabei werden alle Formatierungen entfernt.


Dazu muss in der Datei config.js der Eintrag config.forcePasteAsPlainText = true; vorgenommen werden. Hier ein Beispiel:


 CKEDITOR.editorConfig = function( config ) { config.forcePasteAsPlainText = true;<br />&#13;
// Define changes to default configuration here. For example:<br />&#13;
// config.language = 'fr' // config.uiColor = '#AADC6E'; };


Achtung: Verwendet man den CKeditor in Drupal, so wird dieser über das Drupal-Modul CKEditor eingebunden. Dieses bringt eine eigene Konfigurationsdatei ckeditor.config.js mit, in die der Eintrag erfolgen muss. Hier haben wir in ziemlich am Anfang eingetragen:


/*Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.<br />&#13;
For licensing, see LICENSE.html or http://ckeditor.com/license<br />&#13;
*/<br /><br />&#13;
/*<br />&#13;
WARNING: clear browser's cache after you modify this file.<br />&#13;
If you don't do this, you may notice that browser is ignoring all your changes. CKEDITOR.editorConfig = function(config) {<br />&#13;
config.indentClasses = [ 'rteindent1', 'rteindent2', 'rteindent3', 'rteindent4'; ]; // [ Left, Center, Right, Justified ] config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ]; // The minimum editor width, in pixels, when resizing it with the resize handle.<br />&#13;
config.resize_minWidth = 450;<br />&#13;
config.forcePasteAsPlainText = true;<br />&#13;


Jetzt werden beim Einfügen von Texten via Strg-V alle Formatierungen entfernt. Allerdings auch solche, die man extra in dem Word-Dokument angelegt hatte, wie Fettdruck oder Unterstreichungen. Wenn man die behalten will, ist der Weg über den Button "Aus MS-Word einfügen" unerläßlich.