使用CKEditor

Question

如何告诉CKEditor插入带有某个键盘快捷键的软连字符（­），例如 Ctrl + - （连字符）字？我知道我可以输入 Alt + 0173 ，但我的客户不喜欢这样。

Answer 1

CKEditor 4

我们将使用CKEditor的built-in keybinding API将自定义命令映射到自定义键盘快捷键 Ctrl + Shift + - （因为 Ctrl + - 单独触发＆＃34;缩小＆＃34;许多浏览器中的快捷方式）。为了模块化，我们将into a plugin全部包装起来：

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'
});

这里有一个demonstration（我必须让这个外部代码片段赢得CKEditor＆＃39; <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似乎还没有包含版本4中insertHtml()的等效项，因此该示例使用Unicode字符作为软连字符。这是demo for v5。

对于有兴趣为版本5创建自定义插件和命令的用户，请参阅CKEditor 5 Framework的文档。这需要一个我们可以安装框架的npm包的环境。我们将使用ES6扩展框架的类和Webpack来捆绑它们。

解决赏金的快速说明：我们可以在TinyMCE中bind key combinations similarly demo）：

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

Answer 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, '­');
        })
    }
});