javascript - 使用 CKEditor 插入文本(软连字符)的键盘快捷键

Question

我如何告诉 CKEditor 使用特定的键盘快捷键插入软连字符 (­)，例如 Ctrl+- (连字符)就像在 Word 中一样？我知道我可以输入 Alt+0173，但我的客户不喜欢这样。

Answer 1

CKEditor 4

我们将使用 CKEditor 的 built-in keybinding API将自定义命令映射到自定义键盘快捷键 Ctrl+Shift+-(因为 Ctrl+ - 单独触发许多浏览器中的“缩小”快捷方式)。我们将把这一切都包起来 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 的 <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 字符作为软连字符。这是 demo for v5 .

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

---

解决赏金问题的快速说明:我们可以 bind key combinations similarly在 TinyMCE(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');
        })
    }
});