В этой статье я хотел бы рассказать как настраивать на своем сайте Drupal Редактор CKEditor с загрузкой изображений через IMCE и с подсветкой кода SyntaxHighlighter.
Версии используемые в статье: Drupal 7.15, CKEditor 3.6.3, SyntaxHighlighter 3.0.83, IMCE 7.x-1.5
Скачиваем и устанавливаем следующие модули:
1. Модуль CKEditor (Переписать в /sites/all/modules/ckeditor)
2. Сам редактор CKEditor (скачиваем и записываем в /sites/all/modules/ckeditor/ckeditor)
3. Скачиваем SyntaxHighlighter и переписываем в папку /sites/all/libraries/syntaxhighlighter_3.0.83
4. Модуль SyntaxHighlighter (Переписать в /sites/all/modules/syntaxhighlighter)
5. Плагин SyntaxHighlight для CKEditor (папку _source разорхивировать в /sites/all/modules/ckeditor/ckeditor/, а папку plugins поместить в 2х местах: /sites/all/modules/ckeditor/ и /sites/all/modules/ckeditor/ckeditor/)
6. Для удаления и редактирования имен файлов на сервере необходимо два модуля: IMCE_Mkdir и IMCE_Rename
7. В разделе Модули (/admin/modules) установить 5 модулей - CKEditor, IMCE и SyntaxHighlighter, IMCE_Mkdir, IMCE_Rename
8. Также рекомендуется установить плагин для ckeditor Tableresize для изменения размеров таблицы.
Содержимое архива плагина необходимо поместить в /sites/all/modules/ckeditor/plugins/tableresize
а также прописать в конфигурационном файле /sites/all/modules/ckeditor/ckeditor.config.js
config.extraPlugins = 'syntaxhighlight,tableresize';
1. В настройках SyntaxHighlighter (admin/config/content/syntaxhighlighter) выбераем языки программирования, которые будут подсвечиваться
2. В файле /sites/all/modules/ckeditor/ckeditor.config.js меняем строку 27 и 100 (в CKEditor 3.6.3)
config.extraPlugins = 'syntaxhighlight';
['DrupalBreak', 'DrupalPageBreak', 'Code']
3. В файле /sites/all/modules/ckeditor/ckeditor/config.js вставляем в блок функции CKEDITOR.editorConfig = function( config ) код (между скобками { }):
config.extraPlugins = 'syntaxhighlight'; config.toolbar_Full.push(['Code']);
Проверяем существуют ли у нас фильтры Full HTML и Filtered HTML. Конфигурация/Работа с содержимым/Форматы текста (/admin/config/content/formats)
Если их нет, создаем (+ галочка стоит, - галочка снята):
Full HTML
Наименование: Full HTML
- анонимный пользователь
+ администратор
Включенные фильтры:
- Ограничение на разрешенные HTML теги
- Показывать любой HTML как обычный текст
- Преобразовать переводы строк в соответствующие HTML теги (т.е. <br> и <p>) (Конфликт с Syntax highlighter. Отключить, чтобы в коде не появлялись теги <BR>)
+ Преобразовать адреса в ссылки
+ Исправлять неправильный и обрезанный HTML
+ Syntax highlighter
Filtered HTML
Наименование: Filtered HTML
- анонимный пользователь
+ администратор
Включенные фильтры:
+ Ограничение на разрешенные HTML теги
- Показывать любой HTML как обычный текст
- Преобразовать переводы строк в соответствующие HTML теги (т.е. <br> и <p>)
+ Преобразовать адреса в ссылки
+ Исправлять неправильный и обрезанный HTML
+ Syntax highlighter
Администрирование/Конфигурация/Работа с содержимым/CKEditor (/admin/config/content/ckeditor)
Глобальные настройки/Профиль CKEditor Global Profile
Path to CKEditor: %m/ckeditor
Расширенные настройки/Профиль Full/изменить
Basic setup/
Форматы текста:
+ Full HTML
- Filtered HTML
- Plain text
Editor appearance/
В разделе Кнопки перетягиваем кнопку "code" на панель инструментов
Plugins:
+ Plugin file: syntaxhighlight
Язык: Russian
File browser settings/
File browser type: IMCE
Аналогично меняем профиль Advanced, выбрав Формат текста Filtered HTML
К статье прилагается файл ckeditorimcesyntaxhighlighter.rar в котором собраны вышеперечисленные модули в распакованном и разложенном по папкам виде. Также в этом архиве руссифицирован SyntaxHighlighter.
Теги:
Программирование
PHP
Drupal