Как расширить список форматирования CKEditor

Визуальный редактор CKEditor, используемый во многих CMS, прекрасно настраивается и расширяется. Сегодня мне бы хотелось рассказать о списке форматирования в панели инструментов. По умолчанию он включает в себя несколько видов (в зависимости от версии редактора) заголовков Hx, "обычное" форматирование (тег P) и "моноширинное" (преформатирование по тегу PRE). Можно достаточно легко переоформить поле редактирования и добавить собственных стилей, что бывает очень удобно: в режиме редактирования можно соблюсти особенности оформления при отображении, а также добавить шаблонные фрагменты.

Чтобы добавить новый элемент в список форматирования, отредактируем файл config.js (или же инициализацию в вашей CMS). Итак, в config.format_tags задаётся список тегов, отображаемых в списке:

CKEDITOR.editorConfig = function( config ) {
config.format_tags = 'p;h1;h2;h3;pre;code';
config.format_code={element:"code"};
}

Мы добавили с список config.format_tags новый тег code, что потребовало от нас тут же описать и его самого через format_code. Элемент может быть описан следующим образом:

• element. Название тега нашего элемента;
• attributes. Атрибуты тега. Например, мы можем описать его класс: {class: "anyclass"}.

Теперь нужно добавить текстовое обозначение для нового элемента в списке. Для этого нужно отредактировать языковой файл в папке lang. В зависимости от используемых языков, это может быть ru.js, en.js или какой-то ещё. Добавим туда такое определение:

"tag_code":"Исходный код"

Всё классно, в визуальном редакторе появился новый пункт меню в списке форматирования, однако отображение тега осталось стандартным. Теперь нам нужно внести изменения в стили, относящиеся к полю визуального редактора. Это можно сделать в файле contents.css, и это элементарно:

code { display: block; padding: 5px; ... }

Теперь всё смотрится отлично и как нами задумывалось: