Простая тег-кнопка для CKeditor 4

Возникла довольно тривиальная задача ― написать для CKeditor-а плагин, который бы добавил кнопку, которая бы обрамляла выбранный текст конкретным тегом. По сути тоже самое, что и привычная нам кнопка bold, но вместо <b/> тег <var/>. Для начала нужно декларировать сам плагин:

CKEDITOR.plugins.add( 'insertvar',
    {
        init(editor){ }
    } );

Метод init будет вызываться всякий раз при создании instance-а редактора. В него пишем:

const style = new CKEDITOR.style({ element: 'var' });
const styleCommand = new CKEDITOR.styleCommand( style );
const command = editor.addCommand( 'insertvar', styleCommand );
editor.attachStyleStateChange(style, state =>
    {
        if(!editor.readOnly)
            command.setState(state);
    });

Все эти методы это стандартное API CKeditor-а для внутренних нужд. Для начала мы определяем новый стиль (CKeditor.style), указывая в нём название тега. Затем декларируем стилевую команду, также стандартными средствами. Там довольно много готовой логики. Добавляем эту команду в реестр всех команд редактора (editor.addCommand). 

Метод editor.attachStyleStateChange вызывается всякий раз, когда указанный нами стиль снимается, устанавливается или просто мы перемещаем курсор в другую позицию. command.setState позволяет нам менять состояние кнопки: активная, если курсор внутри тега, неактивная если снаружи. Также от этого состояния зависит и поведение кнопки при нажатии: либо тег установится, либо снимется.

Ну и финальный штрих:

editor.ui.addButton( 'InsertVar',
{
    label: 'Insert Variable',
    icon: 'about',
    command: 'insertvar',
    toolbar: 'insert,99'
} );

Декларируем команду как кнопку для toolbar-а. Иконку я взял стандартную. Осталось только подключить сам плагин и не забыть добавить нашу кнопку InsertVar в настройки toolbar-а. При желании можно всё дооформить по взрослому: добавить комментарии для сборки, локализацию, отдельную иконку и т.д.