Ярлык клавиатуры для вставки текста (мягкий дефис) с помощью CKEditor

Ответ 1

CKEditor 4

Мы будем использовать CKEditor встроенный API привязки клавиш для сопоставления пользовательской команды с пользовательским сочетанием клавиш Ctrl + Shift + - (поскольку только Ctrl + - запускает ярлык "уменьшить масштаб" во многих браузерах). Мы обернем это все в плагин для модульности:

CKEDITOR.plugins.add('soft-hyphen-shortcut-key', {
    init: function (editor) {
        var shortcutKeys = CKEDITOR.CTRL + CKEDITOR.SHIFT + 189;

        editor.addCommand('insertSoftHyphen', {
            exec: function (editor, data) {
                editor.insertHtml('­');
            }
        });

        editor.keystrokeHandler.keystrokes[shortcutKeys] = 'insertSoftHyphen';
    }
});

В этой реализации используется метод редактора insertHtml() для добавления объекта ­ HTML в документ в позиции курсора, когда пользователь нажимает комбинацию клавиш. Мы можем инициализировать новый экземпляр редактора с помощью <textarea name="editor">, который загружает наш плагин:

CKEDITOR.replace('editor', {
    extraPlugins: 'soft-hyphen-shortcut-key'
});

Здесь демонстрация (мне пришлось сделать эти внешние фрагменты кода, которые не будут работать с CKEditor <iframe>).

CKEditor 5

Эта версия находится в alpha на момент написания, поэтому API и документация могут быть неполными. Версия 5 резко изменяет архитектуру проекта, включая переход на ES6 для исходного кода, поэтому я не буду демонстрировать, как создать плагин для этой версии (нам нужно было бы его создать). Вместо этого мы создадим ту же функциональность, что и с плагином, когда мы инициализируем редактор:

ClassicEditor
    .create(document.querySelector('#editor1'))
    .then(function (editor) {
        var shortcutKeys = [ 'Ctrl', 'Shift', 189 ];
        var softHyphen = '\u00AD';

        editor.keystrokes.set(shortcutKeys, function () {
            editor.execute('input', { text: softHyphen });
        });
    });

Версия 5, похоже, пока не включает эквивалент insertHtml() из версии 4, поэтому в примере используется символ Unicode для мягкого дефиса. Здесь демо для v5.

Для тех, кто заинтересован в создании настраиваемого плагина и команды для версии 5, см. документацию для CKEditor 5 Framework. Для этого требуется среда, в которой мы можем установить пакеты инфраструктуры npm. Мы будем использовать ES6 для расширения классов framework и Webpack для их объединения.

Быстрая заметка для решения проблемы: мы можем сопоставить комбинации клавиш аналогично в TinyMCE (демонстрация):

tinymce.init({
    selector: "#editor",
    init_instance_callback: function (editor) {
        editor.shortcuts.add("ctrl+shift+189", 'Insert Soft Hyphen', function () {
            editor.execCommand('mceInsertContent', false, '\u00AD');
        })
    }
});

Ответ 2

Вместо Ctrl + - вы можете использовать Alt + -. Потому что Ctrl + - выделенный по умолчанию ключ браузера, который использует для уменьшения.

Вот пример сортировки:

tinymce.init({
    selector: "#editor",
    init_instance_callback: function (editor) {
        editor.shortcuts.add("alt+189", 'Insert Soft Hyphen', function () {
            editor.execCommand('mceInsertContent', false, '­');
        })
    }
});