使用CKEditor插入文本(软连字符）的快捷键

Keyboard shortcut to insert text (soft hyphen) with CKEditor

本文关键字：快捷键 连字符 CKEditor 插入文本 使用      更新时间：2023-09-26

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

CKEditor 4

我们将使用CKEditor内置的键绑定API将自定义命令映射到自定义键盘快捷键Ctrl+Shift+-（因为在许多浏览器中，2Ctrl+-

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()编辑器方法在用户按下组合键时将&shy; HTML实体添加到光标位置的文档中。我们可以用<textarea name="editor">初始化一个新的编辑器实例，该实例加载我们的插件：

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

这里有一个演示（我不得不制作这个外部代码片段，因为代码片段无法与CKEditor的<iframe>一起使用）。

CKEditor 5

在撰写本文时，此版本为α，因此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字符作为软连字符。这是v5的演示。

对于那些有兴趣为版本5创建自定义插件和命令的人，请参阅CKEditor 5 Framework的文档。这需要一个可以安装框架的npm包的环境。我们将使用ES6来扩展框架的类，并使用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');
        })
    }
});

您可以使用Alt+-而不是Ctrl+-。因为Ctrl+-浏览器的默认分配键用于缩小。

下面是一个排序示例：

tinymce.init({
    selector: "#editor",
    init_instance_callback: function (editor) {
        editor.shortcuts.add("alt+189", 'Insert Soft Hyphen', function () {
            editor.execCommand('mceInsertContent', false, '&shy;');
        })
    }
});
相关文章：