Drupal 7: визуальный редактор с возможностью цитирования кода

Движок Drupal версии 7 еще относительно новый и может быть поэтому для него не реализованы некоторые полезные модули. В частности, я с большим трудом нашел работающий качественный вариант визуального редактора, который бы поддерживал вставку цитат кода PHP, JavaScript и т.д. Сразу скажу, что это CKEditor + Syntax Highlight. В данной публикации подробно расскажу про их настройку.

Некоторые пользуются Bueditor + GeSHi Filter, но мне этот редактор не нравится, т.к. он не визуальный и далеко не самый лучший, но несмотря на это развивается вроде бы неплохо. Сам я сразу начал пользоваться Drupal с редактором CKEditor. На мой взгляд это лучшее что сегодня есть. Однако пользовался я им через модуль Wysiwyg. Как оказалось, оно не годится для интеграции с модулями подсветки синтаксиса из-за отсутствия в настоящее время связующих модулей. Под Drupal 6 они были, а под семерку — нет. В общем, ладно, от слов к делу.

Качаем и устанавливаем модуль CKEditor. Я выбрал версию 7.x-1.x-dev от 2011-Jul-12, чтобы наверняка без проблем использовать новейшую версию самого редактора-скрипта.

Скачиваем скрипт редактора CKEditor с сайта разработчика. На текущий момент актуальная версия имеет номер 3.6.1. Архив с редактором распаковывается в каталоге:

/sites/all/modules/ckeditor/ckeditor (/ckeditor.js).

Качаем и устанавливаем модуль Syntax Highlight. Версию я тоже выбрал последнюю 7.x-2.x-dev от 2011-May-15. Релиз уж больно старый, аж от февраля.

Скачиваем скрипт Syntax Highlight с сайта разработчика. Последняя стабильная версия 3.0.83. Архив распаковывается в каталог:

/sites/all/libraries/syntaxhighlighter_3.0.83 (/index.html).

Скачиваем плагин для CKEditor, добавляющий поддержку Syntax Highlight. Официальный сайт плагина. При распаковке архива плагина вы найдете два каталога: _source и plugins. Оба они должны занять свое место в каталоге модуля CKEditor, а именно:

/sites/all/modules/ckeditor/ckeditor/plugins/…

/sites/all/modules/ckeditor/ckeditor/_source/…

Теперь необходимо отредактировать файл /sites/all/modules/ckeditor/includes/ckeditor.lib.inc. В нем примерно на 315 строке вы найдете функцию ckeditor_load_plugins(). В нее добавляем следующий код:

if (file_exists($editor_path . 'plugins/syntaxhighlight/plugin.js')) {
    $arr['syntaxhighlight'] = array(
        'name' => 'syntaxhighlight',
        'desc' => t('Syntaxhighlight plugin'),
        'path' => base_path() . $editor_path . 'plugins/syntaxhighlight/',
        'default' => 'f'
    );
}

Я это сделал так:

function ckeditor_load_plugins() {
    $arr = array();
    $editor_path = ckeditor_path(FALSE) . '/';
    $ckeditor_path = drupal_get_path('module', 'ckeditor');
    $plugin_dir = $ckeditor_path . '/plugins/';
 
    /*
     * External plugins
     */
    if (file_exists($editor_path . 'plugins/syntaxhighlight/plugin.js')) {
        $arr['syntaxhighlight'] = array(
            'name' => 'syntaxhighlight',
            'desc' => t('Syntaxhighlight plugin'),
            'path' => base_path() . $editor_path . 'plugins/syntaxhighlight/',
            'default' => 'f'
        );
    }
 
    if (module_exists('ckeditor_swf') && file_exists(drupal_get_path('module', 'ckeditor_swf') . '/plugins/swf/plugin.js')) {
        $arr['ckeditor_swf'] = array(
            'name' => 'swf',
...

Заходим в настройки модуля CKEditor admin/config/content/ckeditor/edit/Full (вставка кода будет доступна в Full-версии редактора). Здесь в Editor Apparence => Toolbar (Кнопки) есть текстовое поле, в котором в текстовом виде перечисляются те кнопки, которые должны быть на панели редактора. Вам нужно добавить кнопку Code. Ставьте её в любое удобное для вас место. У меня это выглядит так:

...
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl'],
    ['Link','Unlink','Anchor', 'Linkit'],
    ['DrupalBreak', 'Code'],
    '/',
    ['Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks']
]

Здесь же в настройках модуля CKEditor admin/config/content/ckeditor/edit/Full чуть ниже текстового поля с кнопками включаем плагин Syntaxhighlight plugin.

Все. Остальное если нужно можно настроить по вкусу, но главное, что если вызвать визуальный редактор, то вы увидите на его панели новую кнопку, нажав которую будет появляться диалог для добавления в текст цитат кода.

Все сказанное было опробовано на Drupal 7.4 на нескольких сайтах. Всё отлично работает. В последующих версиях Drupal и новых модулях, вероятно, все может быть не так. В будущем, я надеюсь, появится нормальный редактор/модуль, которые на надо будет так допиливать.

5 Комментариев

  1. В версии 7.x-1.3 модуля CKEditor все манипуляции заключались в копировании папки syntaxhighlight в папку плагинов МОДУЛЯ, отмечанием галочкой этого плагина на странице настроек CKEditor и добавлением кнопки ‘Code’. И все заработало. А вот с dev версией где текстовый вид кнопок заменен на картинки никак вообще не получилось.

    • Спасибо за коммент! Ожидания оправдались.

      Обратите внимание!!! Сейчас изменять код, как в статье действительно не нужно. Текущая dev-версия модуля CKEditor 7.x-1.x-dev 2011-Dec-13 подхватила нормально у меня плагин syntaxhighlight для CKEditor. Опять же, верно подмечено, что теперь его нужно помещать в папку плагинов МОДУЛЯ CKEditor. В общем, в итоге кнопка появилась, именно среди настроек кнопок в графическом виде. Просто перетащил её на нужное место мышкой и все.

  2. А я почему-то не подружился с CKE, хотя для пользователей он более удобен. Ставил MarkItUp себе. Под семь еще такие много чего нет из того, что хотелось бы. Взял на заметку себе набор.

  3. Всё сделал. При нажатии на кнопку экран белеет и на этом всё. В консоли ошибка: NS_ERROR_INVALID_POINTER: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.appendChild] [Прерывать на этой ошибке] …teElement(a));b?this.$.insertBefore(a.$,this.$.firstChild):this.$.appendChild(a…. Как быть?

    • Обратите внимание на мой комментарий выше. Теперь всё просто делается, не нужно код изменять!

Добавить комментарий