Визуальный HTML-редактор онлайн

CKEditor 4 #

Воспользуйтесь онлайн HTML-редактором чтобы отредактировать HTML-код

Вставка текста в электронный учебник с помощью CKEditor
Длительность видеоурока 7:09

Конфигурация #

config.disableNativeSpellChecker = false; - включение нативной проверки орфографии

config.allowedContent = true; - отключить удаление не допустимых тегов

config.resize_enabled = false; - запретить растягивание редактора

config.contentsCss = ["/css/style.css"]; - подгрузить стили в визуальный редактор

Кастомные инструменты редактора:

config.toolbar = [
    ['Source'],
    ['Bold', '-', 'Italic']
];

Создание плагина #

Простой плагин, который будет оборачивать выделенный текст в тег <kbd>

Создание плагина CKEditor:

CKEDITOR.plugins.add('insertkbd', {
    init(editor) {
        const style = new CKEDITOR.style({ element: 'kbd' });
        const styleCommand = new CKEDITOR.styleCommand(style);
        const command = editor.addCommand('insertkbd', styleCommand);
        editor.attachStyleStateChange(style, state => {
            if (!editor.readOnly)
                command.setState(state);
        });
        editor.ui.addButton('InsertKbd', {
            label: 'Insert Kbd',
            icon: 'about',
            command: 'insertkbd',
            toolbar: 'insert,99'
        });
    }
});

Добавление созданного плагина в редактор:

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = 'insertkbd';
};