CKEditor + wysiwyg. Настраиваем визуальный редактор | Паршин Павел

Модуль Wysiwyg позволяет подключать визуальные редакторы для редактирования текста на сайте. В качестве такого редактора я использую CKEditor 3.6.6.

Рассмотрим возможность подключения сторонней темы (например, BootstrapCK-Skin), поскольку стандартные выглядят довольно ужасно. Для CKEditor 4 есть официальная тема Moono, советую использовать ее, однако она не портирована на предыдущие версии редактора.

Скачиваем нужную тему, распаковываем в каталог /sites/all/libraries/ckeditor/skins, таким образом, полный путь будет выглядеть так: /sites/all/libraries/ckeditor/skins/BootstrapCK-Skin.

В каталоге /sites/all/modules создаем папку custom, в которой будет располагаться наш модуль. Назовем его, например, theme_tweaks. Полный путь до файлов модуля будет выглядеть так: /sites/all/modules/custom/theme_tweaks.

В каталоге модуля создаем 2 файла: theme_tweaks.module (будет содержать основной код) и theme_tweaks.info (файл с описанием модуля). Файлы должны обязательно иметь кодировку UTF-8 (без BOM).

Добавляем описание в файл theme_tweaks.info:

name = Theme Tweaks 
description = Add additional features for ckeditor 
package = User interface 
core = 7.x
dependencies[] = wysiwyg

Далее редактируем файл theme_tweaks.module:

<?php

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function theme_tweaks_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['skin'] = 'BootstrapCK-Skin';
  }
}

Сохраняем файлы, включаем модуль и очищаем кэш. Если вы все сделали правильно, то увидите новую тему.

Теперь рассмотрим подключение js-файла для редактирования настроек редактора.

Для этого в ранее написанную функцию добавляем еще одну строчку:

function theme_tweaks_wysiwyg_editor_settings_alter(&$settings, $context) {
    if ($context['profile']->editor == 'ckeditor') {
        $settings['skin'] = 'BootstrapCK-Skin';
        // Подключение файла с настройками
        $settings['customConfig'] = base_path() . drupal_get_path('module', 'theme_tweaks') . '/js/ckeditor_custom_config.js';
    }
}

В папке модуля добавляем каталог js, в который копируем файл с настройками ckeditor_custom_config.js:

CKEDITOR.editorConfig = function( config )
{
    // Отключаем кнопку для скрытия/отображения панели с кнопками
    config.toolbarCanCollapse = false;
};

Другие настройки можно посмотреть в документации к CKEditor.

Предыдущая запись Следующая запись