Поиск по метке: CKeditor

Возникла довольно тривиальная задача ― написать для 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-а. При желании можно всё дооформить по взрослому: добавить комментарии для сборки, локализацию, отдельную иконку и т.д.

CKEditor - это WYSIWYG редактор HTML-кода для браузеров. Всякий раз, сталкиваясь с его документацией или же с его исходным кодом, с исходным кодом его плагинов я терялся. И это не мудрено, ведь CKEditor это очень большой продукт, имеющий довольно сложную инфраструктуру. Но, зачастую, стандартных возможностей не хватает и требуется добавить свою. В этой статье я хотел бы остановиться на плагине, который позволяет встраивать и оперировать в редакторе Yandex-картами. Вот так это будет выглядеть по окончанию редактирования:

подробности…

Столкнулся с проблемой в Opera - после загрузки файла в диалоговом окне редактора CKEditor, если повторно загрузить файл, запрос для загрузки файла на сервер идёт не на заданный вами в настройках URL, а на два таких адреса. Как оказалось, виной тому использование события для тега body — onbeforeunload, которое срабатывает всякий раз, когда document закрывается или перегружает страницу. Сие событие не функционирует в Opera, а так как форма для загрузки файлов не меняется до тех пор, пока диалоговое окно не будет закрыто, URL в нём "складывается".

Решение проблемы - использовать тег <base>, при формировани ответа на серверной стороне. В нём можно указать такой относительный URL, который заставит все относительные ссылки на странице складывать не с реальным Location документа, а с его Base модификацией. Но! не стоит забывать о том, что мир не стоит на месте, и когда-нибудь onbeforeunload появится и в опере... а посему костыль, решающий эту проблему сейчас может насолить в будущем :)