CKEditor entfernt automatisch Klassen von div

140

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.

Iain Simpson
quelle
8
Ich habe die Lösung nach langem Graben gefunden, wenn Sie in config.js gehen und CKEDITOR.config.allowedContent = true setzen. es hält den Editor dann davon ab, mit Dingen herumzuspielen.
Iain Simpson

Antworten:

284

Deaktivieren der Inhaltsfilterung

Die einfachste Lösung ist die Konfiguration.js und die Einstellung:

config.allowedContent = true;

( 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:

config.extraAllowedContent = 'div(*)';

Oder ein paar Bootstrap-Sachen:

config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';

Oder Sie können Beschreibungslisten mit optionalen dirAttributen für dtund ddElementen zulassen :

config.extraAllowedContent = 'dl; dt dd[dir]';

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:

Iain Simpson
quelle
3
Dadurch wird die Funktion deaktiviert. Besser konfigurieren als deaktivieren.
Oleq
1
@lain Simpson: Sie müssen diese Frage noch als beantwortet einstellen. Danke übrigens für die Lösung: D
Jacob van Lingen
1
Manchmal funktioniert diese Lösung, manchmal nicht. Das Stilattribut wird nur manchmal entfernt, der Rest bleibt.
Machineaddict
2
Ich arbeite mit etwas namens Kentico, das diesen Editor verwendet. Ich habe die Zeile "CKEDITOR.config.allowedContent = true;" hinzugefügt. zu meiner config.js, aber es formatiert immer noch meinen HTML-Code neu, wodurch mein Bootstrap-Code beschädigt wird. Hat jemand irgendwelche Ideen?
Tom Bowen
1
Danke für die perfekte Lösung. Ein Tag sparen für mich.
Soony
61

Ich habe eine Lösung gefunden.

Dies schaltet die Filterung aus, es funktioniert, aber keine gute Idee ...

config.allowedContent = true;

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:

config.extraAllowedContent = '*(*)';

Dies ermöglicht jede Klasse und jeden Inline-Stil.

config.extraAllowedContent = '*(*);*{*}';

So lassen Sie für jedes Tag nur class = "asdf1" und class = "asdf2" zu:

config.extraAllowedContent = '*(asdf1,asdf2)';

(Sie müssen also die Klassennamen angeben.)

So erlauben Sie nur class = "asdf" nur für das p-Tag:

config.extraAllowedContent = 'p(asdf)';

So lassen Sie das ID-Attribut für ein beliebiges Tag zu:

config.extraAllowedContent = '*[id]';

etc etc.

So erlauben Sie ein Style-Tag (<style type = "text / css"> ... </ style>):

config.extraAllowedContent = 'style';

Um etwas komplexer zu sein:

config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

Hoffe es ist eine bessere Lösung ...

Tommy bei LIW
quelle
1
Dies ist Superberb Ta
Rippo
10 Sterne für Ihre Antwort
Brijesh Mavani
Ein großes Lob für Ihre Mühe!
Michel
15

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.

Gehen Sie zu "Admin >> Konfiguration >> CKEditor"; Wählen Sie unter Profile Ihr Profil aus (z. B. Vollständig).

Bearbeiten Sie dieses Profil und fügen Sie unter "Erweiterte Optionen >> Benutzerdefinierte JavaScript-Konfiguration" hinzu config.allowedContent = true;.

Geben Sie hier die Bildbeschreibung ein

Vergessen Sie nicht, den Cache unter "Registerkarte" Leistung "zu leeren.

sepehr
quelle
4
Diese Antwort ist nur für Drupal ... aber trotzdem danke, weil ich nur nach einer Drupal-Lösung gesucht habe.
LarS
1
@LarS interessant. Ich kann mich nicht erinnern, warum ich dachte, diese Frage hätte mit Drupal zu tun, aber anscheinend hat sie Drupal-Leuten geholfen.
22.
14

Seit CKEditor v4.1 können Sie dies in config.js von CKEditor tun:

CKEDITOR.editorConfig = function( config ) {
  config.extraAllowedContent = '*[id](*)';  // remove '[id]', if you don't want IDs for HTML tags
}

In der offiziellen Dokumentation finden Sie die detaillierte Syntax der Regeln für zulässige Inhalte

Marty ZHANG
quelle
Es gibt einen Syntaxfehler, den Sie oben hatten. Speziell
Stilattribute
Hallo Kamelkev, meine Antwort ist für Klassen , nicht für Stile , gemäß der Frage. Im Grunde ist es das, was ich benutze, und ich glaube nicht, dass es einen Fehler gibt.
Marty ZHANG
Vielen Dank für die Antwort, Sie *[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.
GDmac
1
+1 Das Verständnis der Inhaltsregeln ist wahrscheinlich eine bessere Lösung als das Deaktivieren aller Filter, wie viele der anderen Antworten vermuten lassen.
Michael Martin-Smucker
10

Wenn Sie ckeditor 4.x verwenden, können Sie es versuchen

config.allowedContent = true;

Wenn Sie ckeditor 3.x verwenden, liegt möglicherweise dieses Problem vor .

Versuchen Sie, die folgende Zeile in config.js einzufügen

config.ignoreEmptyParagraph = false;
Wasif.Butt
quelle
config.ignoreEmptyParagraph=false;ist die einzige Lösung, die für mich funktioniert hat, von allen Antworten, die ich versucht habe. Danke dir.
Stefan
9

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.

config.allowedContent = true;
Mari Selvan
quelle
4

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:

<?php
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['allowedContent'] = TRUE;
  }
}
?>

Ich hoffe das hilft anderen Drupal User.

Pyretta
quelle
Vielen Dank für diese drupale Antwort
Relipse
3

Es folgt das vollständige Beispiel für CKEDITOR 4.x :

HTML

<textarea name="post_content" id="post_content" class="form-control"></textarea>

SKRIPT

CKEDITOR.replace('post_content', {
   allowedContent:true,
});

Der obige Code erlaubt alle Tags im Editor.

Weitere Informationen: CK EDITOR Zulässige Inhaltsregeln

Sanchit Gupta
quelle
0

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.

cdavidyoung
quelle
0

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

Alpdog14
quelle
0

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

Daniel
quelle
0

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).

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });
pandian_Snkl
quelle