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 />
	// Define changes to default configuration here. For example:<br />
	// 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 />
	For licensing, see LICENSE.html or http://ckeditor.com/license<br />
	*/<br />
	<br />
	/*<br />
	WARNING: clear browser&#39;s cache after you modify this file.<br />
	If you don&#39;t do this, you may notice that browser is ignoring all your changes.
	CKEDITOR.editorConfig = function(config) {<br />
	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 />
	config.resize_minWidth = 450;<br />
	config.forcePasteAsPlainText = true;<br />
 

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.

Kann auch via UI geregelt werden

Man kann das auch erzwingen indem man unter "Bereinigen und Ausgabe" (seufz) des entsprechenden wysiwyg-Profils die entsprechende Option aktiviert (bsp: blablaadmin/config/content/wysiwyg/profile/filtered_html/edit).
Zumindest wenn man das WYSIWYG Modul benutzt...

Noch eine Möglichkeit

Ja, das ist auch eine Option. Danke für deinen Hinweis.

Es gibt auch noch eine Möglichkeit die Variable zu setzen ohne die ckeditor.config.js anzufassen: Im jeweiligen Profil (unter ../admin/config/content/ckeditor/edit) kann man die Zeile in "Angepasste JavaScript-Konfiguration" eintragen. Fiel mir gerade beim Stichwort "UI" ein.

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
By submitting this form, you accept the Mollom privacy policy.

 

Das Team

Martina Ruediger

Martina Rüdiger
(X)HTML/CSS, PHP, Drupal, Wordpress, Konzeption, Design und Umsetzung von modernen Web-Layouts, SEO, Printdesign

 

Jürgen Thau
Kundenberatung, Projektsteuerung, PHP, JavaScript, Drupal, Joomla, Drupal- und Joomla-Schulungen  

Was wir bieten

  • Konzeption und Gestaltung rund um Ihre Web-Seite
  • Online Shops
  • barrierearme und zukunftssichere Designs
  • Beratung rund um Content-Management
  • maßgefertigte Lösungen
  • ergänzende Angebote aus dem Print-Bereich
  • bedarfsgerechte Web-Hosting-Angebote
  • Schulungen vor Ort
  • Unterstützung nach dem Start Ihrer Web-Seite

Wir sehen uns:

WordCamp Frankfurt

02.09. – 04.09.2016
@WordCampFRA #WCFRA

Gezwitschert ...

  • Neu im Blog: Problem bei der Anmeldung an Windows10 nach Update (und wie man es löst) https://t.co/mpH7vCQYqS vor 11 Wochen 3 Tage
  • Neu im Blog: Drupal-Webseite auf SSL umstellen https://t.co/3pQWwxAKKV vor 14 Wochen 4 Tage

Neueste Kommentare