Zapobiegaj usuwaniu klas html przez WYSIWYG + CKEditor

Używam edytora WYSIWYG z CKEditor. Zauważyłem, że podczas dodawania niestandardowych klas do moich elementów z widoku „źródłowego”, CKEditor usuwa te klasy przy wyłączaniu widoku źródłowego.

Gdy szukam rozwiązania tego problemu, znalazłem stronę modułu CKEditor, która opisuje, jak to naprawić, używając samego CKEditora. (Zasadniczo musimy skonfigurować konfigurację JS config.allowedContent = truew ustawieniach Advanced Content Filter).

Jednak podczas korzystania z CKEditor przez WYSIWYG te ustawienia nie są ujawniane w interfejsie administratora. Jak to osiągnąć, używając CKEditor przez WYSIWYG?

PS: Nie mogę korzystać z samego CKEditora, ponieważ nie integruje się on z wtyczką mediów .

Jakiej wersji CKEditor używasz? Występuje problem z CKEditor 4.1+, który ma funkcję o nazwie Automatic Content Filter (ACF), która automatycznie usuwa atrybuty niezdefiniowane dla edytora: https://drupal.org/node/1956778

Łatka # 37 w tym numerze działała dla mnie.

Znalazłem rozwiązanie.

To wyłącza filtrowanie, działa, ale nie jest to dobry pomysł ...

config.allowedContent = true;

Gra ciągiem treści działa dobrze dla id, itp., Ale nie dla atrybutów class i style, ponieważ masz () i {} dla filtrowania klas i stylów.

Więc zakładam się, aby zezwolić dowolnej klasie w edytorze:

config.extraAllowedContent = '*(*)';

Umożliwia to dowolną klasę i dowolny styl wbudowany.

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

Aby dopuścić tylko class = „asdf1” i class = „asdf2” dla dowolnego znacznika:

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

(więc musisz podać nazwy klas)

Aby zezwolić tylko klasie = "asdf" tylko dla znacznika p:

config.extraAllowedContent = 'p(asdf)';

Aby zezwolić na atrybut id dla dowolnego tagu:

config.extraAllowedContent = '*[id]';

itd itd

Aby zezwolić na znacznik stylu (<style type = "text / css"> ... </style>):

config.extraAllowedContent = 'style';

Aby być nieco bardziej złożonym:

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

Mam nadzieję, że to lepsze rozwiązanie ...

Wydaje się, że należy to dodać do modułu WYSIWYG. Możliwość dodawania niestandardowych ustawień do edytorów jest dość powszechnym wymogiem. Ale w przypadku braku tego nadal polecam nie edytować samego modułu, ponieważ psuje się on przy uaktualnieniach ... na szczęście moduł zapewnia wywołanie drupal_alter, więc w module niestandardowym:

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

gdzie „mymoduł” to oczywiście nazwa niestandardowego modułu. Wykonuje to zadanie bez edytowania czyichś modułów.

Spróbuj dodać następujące elementy do module / wysiwyg / editors / ckeditor.inc

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

tak, że teraz brzmi:

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

Bez włamywania się do żadnych źródeł, a także bez próby ustalenia GDZIE odczytywane są te ustawienia, możesz dodać to do własnego modułu niestandardowego

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];*(*);*{*}'
        );
    }
}

Ustawienia, o które prosi OP, *(*);*{*}pochodzą z odpowiedzi @Tommy powyżej. Wydaje się, że pozwala to na atrybuty klasy i stylu dla dowolnego elementu. Reszta to tylko przykładowe wpisy. Jako kolejny przykład ten wpis dopuszcza tagi potrzebne modułowi multimediów.

'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)',

Filtrowany filtr HTML usuwa klasy z elementów, które nie znajdują się w dozwolonych elementach HTML . Znacznik akapitu ( <p>) nie jest tam domyślnie (co może być mylące i nienaturalne), chociaż może być najczęstszym elementem, w którym stosowana jest klasa. Po umieszczeniu go tam Filtrowany HTML nie będzie już usuwał klas z tych tagów. To samo dotyczy tagów graficznych ( <img>).