Предотвратить WYSIWYG + CKEditor от удаления HTML-классов

9

Я использую WYSIWYG редактор с CKEditor. Я обнаружил, что при добавлении пользовательских классов в мои элементы из представления «источник», CKEditor удаляет эти классы при переключении из представления источника.

При поиске решения этой проблемы я нашел страницу модуля CKEditor, в которой описано, как это исправить при использовании только CKEditor. (По сути, нам нужно настроить конфигурацию JS config.allowedContent = trueв ее настройках Advanced Content Filter).

Однако при использовании CKEditor через WYSIWYG эти настройки не отображаются в интерфейсе администратора. Как добиться того же при использовании CKEditor через WYSIWYG?

PS: я не могу использовать один CKEditor, потому что он не интегрируется с плагином медиа .

jrharshath
источник
Какую версию CKEditor вы загрузили в папку с библиотеками?
Биби
используя версию 4.2
jrharshath

Ответы:

4

Какую версию CKEditor вы используете? Существует проблема с CKEditor 4.1+, который имеет функцию под названием Автоматический фильтр содержимого (ACF), которая автоматически удаляет атрибуты, не определенные для редактора: https://drupal.org/node/1956778

Патч № 37 в номере работал на меня.

Дэйв Брунс
источник
в то время как патч потерпело неудачу для меня, я жестко «allowedContent = истина» в editors/ckeditor.inc«S wysiwyg_ckeditor_settingsFunciton
jrharshath
Рад, что ты получил это работает. Этот патч нужно применить к -dev версии wysiwyg, так что может быть поэтому он и не применяется.
Дэйв Брунс
В патче намного больше, чем в этой единственной строке. Убедитесь, что вы полностью протестировали, чтобы все работало соответствующим образом!
Биби
10

Я нашел решение.

Это отключает фильтрацию, работает, но не очень хорошая идея ...

config.allowedContent = true;

Играть со строкой содержимого отлично работает для id и т. Д., Но не для атрибутов класса и стиля, потому что у вас есть () и {} для фильтрации классов и стилей.

Так что моя ставка на то, чтобы разрешить любой класс в редакторе:

config.extraAllowedContent = '*(*)';

Это позволяет любой класс и любой встроенный стиль.

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

Разрешить только class = "asdf1" и class = "asdf2" для любого тега:

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

(поэтому вы должны указать имена классов)

Разрешить только class = "asdf" только для тега p:

config.extraAllowedContent = 'p(asdf)';

Чтобы разрешить атрибут id для любого тега:

config.extraAllowedContent = '*[id]';

и т. д.

Чтобы разрешить тег стиля (<style type = "text / css"> ... </ style>):

config.extraAllowedContent = 'style';

Чтобы быть немного сложнее:

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

Надеюсь, это лучшее решение ...

Томми в LIW
источник
1
ГДЕ?!?!!?!? в каком файле !!! никто в интернете НЕ РАЗ упомянул, где должен быть установлен этот config.allowedContent?
кодерама
@coderama в / admin / config / content / ckeditor, выберите свой профиль для редактирования, разверните Дополнительные параметры и поместите его в пользовательскую конфигурацию JavaScript
UnsettlingTrend
2

Это похоже на то, что следует добавить в модуль WYSIWYG, возможность добавления пользовательских настроек в редакторы является довольно распространенным требованием. Но в отсутствие этого я все же рекомендую не редактировать сам модуль, так как он будет поврежден при обновлении ... к счастью, модуль обеспечивает вызов drupal_alter, поэтому в пользовательском модуле:

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

где «mymodule» - это, очевидно, название вашего пользовательского модуля. Это выполняет задачу, не редактируя чужой модуль.

тройка
источник
0

Попробуйте добавить следующее в модули / wysiwyg / editors / ckeditor.inc

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

так что теперь он читает:

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

Не взламывая какие-либо источники, а также не пытаясь выяснить, ГДЕ читаются эти настройки, вы можете добавить это в свой собственный модуль

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

Настройки, которые запрашивает OP, взяты *(*);*{*}из ответа @Tommy выше. Кажется, это позволяет атрибуты класса и стиля для любого элемента. Остальные только примеры записей. В качестве другого примера, эта запись разрешает теги, необходимые для медиа-модуля.

'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)',
commonpike
источник
0

Фильтрованный HTML-фильтр удаляет классы из элементов, которых нет в его разрешенных HTML-элементах . <p>Тэг абзаца ( ) по умолчанию отсутствует (что может сбивать с толку и неестественно), хотя это может быть самым частым элементом, к которому применяется класс. Как только вы поместите его туда, фильтрованный HTML больше не будет удалять классы из этих тегов. То же самое касается тегов изображения ( <img>).

cptstarling
источник
Но, как поместить класс в опцию «Разрешено» элементов HTML. Насколько мне известно, вы можете поместить элемент HTML в список, то есть <div>, <span> и т. Д. Таким образом, в соответствии с этим div и span не будут удалены, но как поместить туда класс, можете ли вы привести пример?
CodeNext
Там нет необходимости ставить класс там. Если элемент HTML находится в списке, его класс (ы) останется нетронутым и не будет удален.
cptstarling
Я не понимаю, почему мой пост показывает вчера, я спросил это несколько месяцев назад, есть ли проблема ???????
CodeNext
Странно, потому что ответ, на который вы ответили, всего около 2 дней :)
cptstarling
Ни один человек, очень странно, я ничего не делал в течение нескольких месяцев на этом ... О, Боже, позвольте мне выйти из системы и повторно войти ...
CodeNext