Устраняем проблему с форматированием html в CKEditor в Drupal

08 апреля 2014 - 14:26

CKEditor – один из наиболее популярных WYSIWYG-редакторов, для его интеграции с Drupal служит одноименный модуль.

Как правило, настроек по умолчанию этого редактора достаточно для удобного форматирования текста, вставки ссылок, изображений и т.д. Однако в ряде случаев требуется вставить в окно редактора дополнительный скрипт, добавить стилевой класс к абзацу или другому элементу html-кода. Допустим, вы скопировали откуда-то HTML, вставили его напрямую в поле Body ноды (напрямую в textarea формы создания ноды) и переключились на редактор. Скрипты CKEditor после переключения способа ввода отфильтруют этот код. Такая проблема обычно возникает при вставке кодов различных виджетов.

Решение проблемы простое. В дополнительных настройках редактора для формата Full HTML по адресу admin/config/content/ckeditor/edit/Full в опцию «Пользовательская конфигурация JavaScript» добавляем строку (см. скриншот):

config.allowedContent = true;

dopolnitelnye-nastroyki-ckeditor.jpg

Теперь скрипт визуального редактора оставит введенный html-код без изменений. Естественно, из соображений безопасности сайта такую настройку следует применять только для форматов ввода, доступ к которым имеют лишь администраторы или пользователи других проверенных ролей.

Комментарии

В настройках фильтров в разделе /admin/config/content/formats/TEXT_FORMATзапретить. Выбрать фильтр "Пропускать указанные ниже HTML-теги/Allow following HTML-tags", указать допустимые теги. В настройках профиля CKEDITOR'а для нужного текстового формата убрать с тулбара кнопки управления якорями.

Если вы об этих ссылках.

Полезный плагин еще есть Media (oEmbed) Plugin. Зависимости, которые могут понадобиться: Widget и Line Utilities. Еще Dialog, Dialog User Interface, Clipboard, но dialog и clipboard вроде из коробки поставляются в full версии библиотеки.

Плагин позволяет использовать встраиваемое содержимое в редакторе, НО, в отличие от того же iframe, отображает это содержимое прямо в CKEDITOR'е. В tinymce, по-моему, такая возможность давно имеется, а в CKE появилась только в последних минорных версиях и была реализована как-раз этим плагином. Хотя, может я чего-то неправильно раньше настраивал.

Единственная проблема, с которой столкнулся: не появилась кнопка для добавления в тулбар. В итоге пришлось запилить свой полный конфиг тулбара в "Пользовательская конфигурация JavaScript":
config.extraPlugins = 'dialog,dialogui,iframedialog,popup,filebrowser,widget,lineutils,oembed';
config.toolbar = [...{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak', 'oembed' ] },...];
config.disableNativeSpellChecker = false;
oembed - та самая кнопка для медиа.

Если у вас задача с отображением встраиваемого содержимого в редакторе решалась проще, пожалуйста, опишите решение.

P.S. Не получилось сделать многострочный <code>

В этом блоге у меня установлен https://www.drupal.org/project/bueditor и https://www.drupal.org/project/geshifilter для вставки и подсветки кода, а данную статью написал, так как часто на клиентских сайтах возникала необходимость использовать id и class для верстки, а без указанной в посте настройки скрипты ckeditor-а их затирали.

Скиньте вашу разметку, какие теги затираются? Возможно, это не редактор их режет, а настройки формата Full HTML (если вы его используете).

На сколько я понимаю, ему не нравятся div и span. Может есть возможность их в исключения добавить (разрешить использование)?
Извините, что наплодил тут у вас комментов.

<div class="vcard">
<span class="category">
    <span class="value-title" title="Газовые котлы отопления"></span>
  </span>
<div class="tel" style="text-align: right;>Телефон: <abbr class="value" title="+ 375 (17) 206-08-76">+ 375 (17) 206-08-76</abbr>
    </div><br />
<div style="text-align: right;">
    Мы работаем <span class="workhours">пн-пт 9:00-17:00</span>
  </div>
  <div style="text-align: right;">
    <a class="fn org url" href="<a href="http://gazbel.by/">">http://gazbel.by/"></a>ООО ГазКомплектСервис</a>
  </div>
  <div class="adr" style="text-align: right;">
    <span class="locality">г. Минск</span>,
    <span class="street-address">ул. Шаранговича, д.7, офис 319</span>
        <span class="geo">
    <span class="latitude">
      <span class="value-title" title="53.88769"> </span>
    </span>
    <span class="longitude">
      <span class="value-title" title="27.45847"> </span>
    </span>
  </span>
  </div>
  <div style="text-align: right;">Электронная почта:
    <a class="email" style="text-align: right;" href="<a href="mailto:gazav@tut.by">
">mailto:gazav@tut.by">
</a>      <a href="mailto:gazav@tut.by">gazav@tut.by</a>
    </a>
  </div>  
</div>

У меня на одном сайте установлен более старый вариант скрипта с сайта Ckeditor. С этим скриптом действительно приведенный вами код помогает, js код от гугл-адвордс не обрезается. А вот на другой сайт тока что установил новый вариант скрипта, там уже это не помогает, упорно чистит код. Возможно другой код надо прописать в настройках редактора. Но какой, вот в чем вопрос.

Не думаю, что что-то поменялось в настройках новой версии редактора, проверьте, используете ли вы формат Full HTML и что именно для этого формата прописали расширенные настройки.