Настройка CKEditor 4

Сегодня для меня CKEditor 4 является более предпочтительным вариантом для Cotonti Siena, поскольку он более отработан, имеет на борту несколько удобных плагинов и имеет достаточно большое количество тем (skins). В это же время CKEditor 5, при всей своей продвинутости, имеет явно избыточный функционал, который не может не оказывать влияние на потребление ресурсов.

С другой стороны, “четверка” в коробочной конфигурации имеет несколько моментов, требующих корректировки. На этом и остановимся.

Сразу поясню: все сказанное ниже сделано на основе личных предпочтений. Пояснения прилагаются, но и догмой это считать не стоит.

Настраиваем кнопки меню

Итак, открываем plugins/ckeditor4/lib/config.js и начинаем чистку.

Прежде всего, расстанемся с кнопками, которые используются редко или вообще не востребованы. Для меня это:

• печать,
• проверка орфографии,
• смайлики и emoji,
• разделители страниц,
• о редакторе,
• вставка медиа-объектов.

В результате сформировался конфиг config.removeButtons в следующем виде:

config.removeButtons = 'Print,SpellChecker,Scayt,Smiley,EmojiPanel,PageBreak,About,oembed';

Панель с форматированием перенесем в начало, где она виднее и сподручнее. Результат:

config.toolbar_Full = [
	['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
	['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	['Image','oembed','Table','HorizontalRule','Smiley','EmojiPanel','SpecialChar','PageBreak'],
	['Maximize', 'ShowBlocks','-', 'Source', '-', 'About'],
	'/',
	['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
	['Link','Unlink','Anchor','More','Syntaxhighlight'],
	['Styles','Format'],
	['TextColor','BGColor']
];

Также подчистим переменную config.format_tags, где определяются стили в блоке форматирования. По умолчанию она имеет вид:

config.format_tags = 'p;h1;h2;h3;h4;pre';

Заголовок h1 в текстуальной части страницы не используется, а моноширинный стиль – это вообще вотчина плагина syntaxhighlighter. Так что оставляем:

config.format_tags = 'p;h2;h3;h4';

Еще один важный для меня момент – это атрибуты cellpadding, cellspacing, width, align и summary применяемые CKEditor 4 к вставляемым таблицам. Они уже давно устарели и потеряли свою актуальность, поэтому желательно от них избавиться. Для этого запретим использование этих атрибутов с таблицами, но прежде всего, обратим внимание на следующее определение:

config.allowedContent = true; // disable ACF

Фактически, оно отключает фильтр контента (ACF – Advanced Content Filter). Закомментируем его и заменим на

config.allowedContent = {
  $1: {
    elements: CKEDITOR.dtd,
    attributes: true,
    styles: true,
    classes: true
  }
};

Теперь заблокируем устаревшие атрибуты применительно к таблицам:

config.disallowedContent = 'table[cellpadding, cellspacing, border, width, align, summary]{*}';

Теперь эти атрибуты будут также удалены и из диалогового окна для добавления таблицы: именно то, что требовалось!

Аналогичным образом поступим с вставкой изображений. Здесь в блок-лист войдет устаревший атрибут align и вполне легитимные, но совершенно ненужные width и height. Вот результат:

config.disallowedContent = 'table[cellpadding, cellspacing, border, width, align, summary]{*}; img[height, width, align]{*}';

На этом пока все. Переходим к стилям.

Конфигурирование стилей

Открываем plugins/ckeditor4/lib/styles.js и начинаем настройку с блочных стилей.

Сразу же удаляем Italic Title, Subtitle и Special Container – это явно чья-то нелепая кастомизация с привязкой по конкретным цветам, отступам и проч. Вместо них добавим бутстраповские “алерты”:

{ name: 'Alert Info', element: 'div', attributes: { 'class': 'alert alert-info' } },
{ name: 'Alert Warning', element: 'div', attributes: { 'class': 'alert alert-warning' } },
{ name: 'Alert Danger', element: 'div', attributes: { 'class': 'alert alert-danger' } },

Теперь инлайновые стили. Сразу же убираем устаревшие элементы big и tt. Удаляем также и чью-то кастомизацию span.marker и – за ненадобностью – определения для RTL / LTR. Остальные элементы легитимны, так что используйте их на ваше усмотрение. Я оставил все, отсортировав по частоте использования:

{ name: 'Computer Code', element: 'code' },

{ name: 'Small', element: 'small' },
{ name: 'Deleted Text', element: 'del' },
{ name: 'Inserted Text', element: 'ins' },

{ name: 'Keyboard Phrase', element: 'kbd' },
{ name: 'Sample Text', element: 'samp' },
{ name: 'Variable', element: 'var' },

{ name: 'Cited Work', element: 'cite' },
{ name: 'Inline Quotation', element: 'q' },

Наконец, стили объектов. Используются они особым способом:

• объект (например, таблица) подсвечивается путем помещения в нее курсора,
• из списка Стили / Стили объекта выбираем необходимый стиль.

Из этой истории меня интересуют главным образом таблицы. Поэтому добавим бутстраповские классы для них:

{ name: 'Bootstrap Table Striped', element: 'table', attributes: { 'class': 'table table-striped' } },
{ name: 'Bootstrap Table Bordered', element: 'table', attributes: { 'class': 'table table-bordered' } },
{ name: 'Bootstrap Table Borderless', element: 'table', attributes: { 'class': 'table table-borderless' } },

Теперь в один клик можно добавить таблицу и в почти один клик применить к ней необходимый стиль.

Для разнообразия оставим стиль “квадратиками” для маркированных спискови добавим у нему стиль "Ранее" для параграфа:

{ name: 'Earlier', element: 'p', attributes: { 'class': 'earlier' } },
{ name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } },

Поскольку я не являюсь сторонником “раскрасок” и стилизую контент глобальными стилями, а не атрибутом styles, на этом мой джентельменский набор заканчивается.

Заключение

Кастомизация CKEditor 4 представляет собой набор действий, понятный и доступный любому пользователю со средними навыками:

1. Предопределяем стили.
2. Помещаем курсор в необходимый элемент (параграф, таблица, ячейка таблицы и проч.).
3. Применяем необходимый стиль из меню "Стили".

Если вы все сделаете правильно, эффективность работы с контентом увеличится если не кратно, то в разы. Ну а если что-то пошло не так, в нашем Pastebin можно скачать готовые файлы config.js и styles.js.

В предыдущем посте мы пошагово разбирали установку Cotonti.