it-swarm.com.de

Verhindern Sie, dass WYSIWYG + CKEditor HTML-Klassen entfernt

Ich verwende den WYSIWYG-Editor mit CKEditor. Ich stelle fest, dass CKEditor beim Hinzufügen benutzerdefinierter Klassen zu meinen Elementen aus der "Quell" -Ansicht diese Klassen entfernt, wenn die Quellansicht verlassen wird.

Beim Googeln nach einer Lösung für dieses Problem habe ich die CKEditor-Modulseite gefunden, die beschreibt, wie dies behoben werden kann, wenn nur CKEditor verwendet wird. (Grundsätzlich müssen wir eine JS-Konfiguration einrichten config.allowedContent = true in den Einstellungen für den erweiterten Inhaltsfilter).

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.

9
jrharshath

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.

4
Dave Bruns

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

10
Tommy at LIW

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 kaputt gehen würde. Glücklicherweise ruft das Modul drupal_alter Auf, 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.

2
Trey

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

'allowedContent' => TRUE, Bis 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, 
  );
0
Todd Austin

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, sind *(*);*{*} 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)',
0
commonpike

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

0
cptstarling