Verhindern Sie, dass WYSIWYG + CKEditor HTML-Klassen entfernt

Ich verwende den WYSIWYG-Editor mit CKEditor. Ich stelle fest, dass CKEditor beim Hinzufügen von benutzerdefinierten Klassen zu meinen Elementen aus der "Quell" -Ansicht diese Klassen entfernt, wenn Sie aus der Quellansicht wechseln.

Als ich nach einer Lösung für dieses Problem suchte, fand ich die Seite des CKEditor-Moduls, auf der beschrieben wird, wie dies behoben werden kann, wenn nur CKEditor verwendet wird. (Grundsätzlich müssen wir eine JS-Konfiguration config.allowedContent = truein den Einstellungen für den erweiterten Inhaltsfilter einrichten .)

Bei Verwendung von CKEditor über WYSIWYG werden diese Einstellungen jedoch nicht in der Administrationsoberfläche angezeigt. Wie erreichen Sie dasselbe, wenn Sie CKEditor über WYSIWYG verwenden?

PS: Ich kann CKEditor nicht alleine verwenden, da es nicht in das Medien-Plugin integriert ist .

Welche Version von CKEditor verwenden Sie? Es gibt ein Problem mit CKEditor 4.1+, das über eine Funktion namens Automatic Content Filter (ACF) verfügt, mit der Attribute, die nicht für den Editor definiert wurden, automatisch entfernt werden: https://drupal.org/node/1956778

Patch Nr. 37 in der Ausgabe hat bei mir funktioniert.

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

Dies scheint etwas zu sein, das dem WYSIWYG-Modul hinzugefügt werden sollte. Die Möglichkeit, Editoren benutzerdefinierte Einstellungen hinzuzufügen, ist eine weit verbreitete Anforderung. In Ermangelung dessen empfehle ich dennoch, das Modul selbst nicht zu bearbeiten, da es bei Upgrades beschädigt werden würde. Glücklicherweise bietet das Modul einen Aufruf an drupal_alter, also in einem benutzerdefinierten Modul:

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context){
    //check if the editor is ckeditor and the version is at least 4.0
    if($context['profile']->editor=='ckeditor' && $context['editor']['installed version'][0]>3){
        //add custom settings for ckeditor 4.+ here
        $settings['allowedContent'] = TRUE;
    }
}

Dabei ist "mymodule" offensichtlich der Name Ihres benutzerdefinierten Moduls. Dies erledigt die Aufgabe, ohne ein anderes Modul zu bearbeiten.

Fügen Sie den Modulen / wysiwyg / editors / ckeditor.inc Folgendes hinzu

'allowedContent' => TRUE, zu function wysiwyg_ckeditor_settings($editor, $config, $theme)

so dass es jetzt lautet:

function wysiwyg_ckeditor_settings($editor, $config, $theme) {
  $settings = array(
    'width' => 'auto',
    // For better compatibility with smaller textareas.
    'resize_minWidth' => 450,
    'height' => 420,
    // @todo Do not use skins as themes and add separate skin handling.
    'theme' => 'default',
    'skin' => !empty($theme) ? $theme : 'kama',
    // By default, CKEditor converts most characters into HTML entities. Since
    // it does not support a custom definition, but Drupal supports Unicode, we
    // disable at least the additional character sets. CKEditor always converts
    // XML default characters '&', '<', '>'.
    // @todo Check whether completely disabling ProcessHTMLEntities is an option.
    // ADDED  'allowedContent' => TRUE, to keep WYSIWYG from removing classes
    'entities_latin' => FALSE,
    'entities_greek' => FALSE,
    'allowedContent' => TRUE, 
  );

Ohne Quellen zu hacken und auch ohne herauszufinden, wo diese Einstellungen gelesen werden, können Sie dies Ihrem eigenen benutzerdefinierten Modul hinzufügen

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context) {
    if ($context['profile']->editor == 'ckeditor') {
        $settings['extraAllowedContent'] = array(
            'a[download,type,length,href]',
            'span;ul;li;table;tr;td;style;*[id];*(*);*{*}'
        );
    }
}

Die Einstellungen, nach denen das OP fragt, stammen *(*);*{*}aus der Antwort von @Tommy oben. Dies scheint Klassen- und Stilattribute für jedes Element zuzulassen. Der Rest sind nur Beispieleinträge. Als weiteres Beispiel ermöglicht dieser Eintrag die vom Medienmodul benötigten Tags.

'img[title,alt,src,data-cke-saved-src](wysiwyg-break,drupal-content);video[width,height,controls,src](*);source[src,type];audio[controls,src](*);img[*](media-element,file-default)',

Der gefilterte HTML-Filter entfernt die Klassen von Elementen, die nicht in den zulässigen HTML-Elementen enthalten sind . Das Absatz-Tag ( <p>) ist standardmäßig nicht vorhanden (was verwirrend und unnatürlich sein kann), obwohl es möglicherweise das häufigste Element ist, auf das die Klasse angewendet wird. Sobald Sie es dort abgelegt haben, entfernt gefiltertes HTML die Klassen nicht mehr von diesen Tags. Gleiches gilt für Bild-Tags ( <img>).