Рейтинг@Mail.ru

Вы здесь

Главная

В этой статье я хотел бы рассказать как настраивать на своем сайте 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';

Настройка SyntaxHighlighter

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

Администрирование/Конфигурация/Работа с содержимым/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.

Тема: