Ich verwende CKEditor als Backend- Editor auf meiner Website. Es treibt mich jedoch um die Kurve, da es den Code anscheinend so ändern möchte, wie es passt, wenn ich die Quellentaste drücke. Zum Beispiel, wenn ich auf Quelle drücke und eine <div>
...
<div class="myclass">some content</div>
Es entfernt dann ohne ersichtlichen Grund die Klasse von der <div>
, also wenn ich erneut auf Quelle drücke, wurde es geändert in ...
<div>some content</div>
Ich gehe davon aus, dass dieses irritierende Verhalten in der deaktiviert werden kann config.js
, aber ich habe gegraben und kann in der Dokumentation nichts finden, um es auszuschalten.
Antworten:
Deaktivieren der Inhaltsfilterung
Die einfachste Lösung ist die Konfiguration.js und die Einstellung:
( Denken Sie daran, den Browser-Cache zu leeren. ) Dann hört CKEditor auf, den eingegebenen Inhalt überhaupt zu filtern. Dadurch wird jedoch die Inhaltsfilterung vollständig deaktiviert , was eine der wichtigsten Funktionen von CKEditor ist.
Konfigurieren der Inhaltsfilterung
Sie können den Inhaltsfilter von CKEditor auch genauer konfigurieren , um nur die Elemente, Klassen, Stile und Attribute zuzulassen, die Sie benötigen. Diese Lösung ist viel besser, da CKEditor immer noch viel beschissenes HTML entfernt, das Browser beim Kopieren und Einfügen von Inhalten produzieren, aber nicht den gewünschten Inhalt entfernt.
Beispielsweise können Sie die Standardkonfiguration des CKEditor erweitern, um alle div-Klassen zu akzeptieren:
Oder ein paar Bootstrap-Sachen:
Oder Sie können Beschreibungslisten mit optionalen
dir
Attributen fürdt
unddd
Elementen zulassen :Dies waren nur sehr grundlegende Beispiele. Sie können alle Arten von Regeln schreiben - erfordern Attribute, Klassen oder Stile, die nur mit speziellen Elementen übereinstimmen und mit allen Elementen übereinstimmen. Sie können auch Dinge verbieten und die Regeln von CKEditor völlig neu definieren. Lesen Sie mehr über:
quelle
Ich habe eine Lösung gefunden.
Dies schaltet die Filterung aus, es funktioniert, aber keine gute Idee ...
Das Spielen mit einer Inhaltszeichenfolge funktioniert gut für ID usw., jedoch nicht für die Klassen- und Stilattribute, da Sie () und {} für die Klassen- und Stilfilterung haben.
Meine Wette ist also, dass jede Klasse im Editor zugelassen wird:
Dies ermöglicht jede Klasse und jeden Inline-Stil.
So lassen Sie für jedes Tag nur class = "asdf1" und class = "asdf2" zu:
(Sie müssen also die Klassennamen angeben.)
So erlauben Sie nur class = "asdf" nur für das p-Tag:
So lassen Sie das ID-Attribut für ein beliebiges Tag zu:
etc etc.
So erlauben Sie ein Style-Tag (<style type = "text / css"> ... </ style>):
Um etwas komplexer zu sein:
Hoffe es ist eine bessere Lösung ...
quelle
Bearbeiten : Diese Antwort ist für diejenigen, die das ckeditor-Modul in drupal verwenden.
Ich habe eine Lösung gefunden, bei der die ckeditor js-Datei nicht geändert werden muss.
Diese Antwort wird von hier kopiert . Alle Credits sollten an den Originalautor gehen.
quelle
Seit CKEditor v4.1 können Sie dies in config.js von CKEditor tun:
In der offiziellen Dokumentation finden Sie die detaillierte Syntax der Regeln für zulässige Inhalte
quelle
*[id](*)
haben den Trick gemacht, den ich*[id,class]
zuvor versucht habe , aber das erlaubt das Klassenattribut irgendwie nicht. CKeditor-Dokumente sind ein bisschen wie ein Labyrinth.Wenn Sie ckeditor 4.x verwenden, können Sie es versuchen
Wenn Sie ckeditor 3.x verwenden, liegt möglicherweise dieses Problem vor .
Versuchen Sie, die folgende Zeile in config.js einzufügen
quelle
config.ignoreEmptyParagraph=false;
ist die einzige Lösung, die für mich funktioniert hat, von allen Antworten, die ich versucht habe. Danke dir.Dies wird in ckeditor als ACF (Automatic Content Filter) bezeichnet. Es werden alle unnötigen Tags entfernt, die wir im Textinhalt verwenden. Wenn Sie diesen Befehl in Ihrer Datei config.js verwenden, sollte dieses ACK deaktiviert werden.
quelle
Weitere Informationen finden Sie im offiziellen Handbuch zum erweiterten Inhaltsfilter und im Tutorial zur Plugin-Integration .
Sie werden viel mehr über diese leistungsstarke Funktion erfahren. Siehe auch config.extraAllowedContent , das für Ihre Anforderungen geeignet erscheint.
quelle
Wenn Sie Drupal AND das Modul "WYSIWYG" mit der CKEditor-Bibliothek verwenden, kann die folgende Problemumgehung eine Lösung sein. Für mich funktioniert es wie ein Zauber. Ich verwende CKEditor 4.4.5 und WYSIWYG 2.2 in Drupal 7.33. Ich habe diese Problemumgehung hier gefunden: https://www.drupal.org/node/1956778 .
Hier ist es: Ich erstelle ein benutzerdefiniertes Modul und füge den folgenden Code in die Datei ".module" ein:
Ich hoffe das hilft anderen Drupal User.
quelle
Es folgt das vollständige Beispiel für CKEDITOR 4.x :
HTML
SKRIPT
Der obige Code erlaubt alle Tags im Editor.
Weitere Informationen: CK EDITOR Zulässige Inhaltsregeln
quelle
Ich habe festgestellt, dass der Wechsel zur Verwendung von vollständigem HTML anstelle von gefiltertem HTML (unter dem Editor im Dropdown-Feld Textformat) dieses Problem für mich behoben hat. Andernfalls würde der Stil verschwinden.
quelle
Ich möchte diese config.allowedContent = true hinzufügen; muss zur Datei ckeditor.config.js hinzugefügt werden, nicht zur Datei config.js. config.js hat nichts für mich getan, aber das Hinzufügen zum oberen Bereich von ckeditor.config.js hat meine div-Klassen beibehalten
quelle
Eine weitere Option bei Verwendung von Drupal besteht darin, einfach den CSS-Stil hinzuzufügen, den Sie verwenden möchten. Auf diese Weise wird der Stil- oder Klassenname nicht entfernt.
In meinem Fall unter der Registerkarte CSS in Drupal 7 fügen Sie einfach so etwas hinzu
facebook = span.icon-facebook2
Überprüfen Sie auch, ob die Schaltfläche für Schriftstile aktiviert ist
quelle
Ich habe das gleiche Problem auf Chrom mit ckeditor 4.7.1. Deaktivieren Sie einfach pasteFilter auf ckeditor instanceReady. Diese Eigenschaft deaktiviert alle Filteroptionen von Advance Content Filter (ACF).
quelle