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.

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:

• Inhaltsfilterung in CKEditor - Warum benötigen Sie Inhaltsfilter?
• Erweiterter Inhaltsfilter - ausführliche Beschreibung des Filtermechanismus.
• Zulässige Inhaltsregeln - Schreiben zulässiger Inhaltsregeln.

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

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

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

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

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;

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;

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.

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.

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

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.

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

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

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;
    });