Keyboard shortcut to insert text (soft hyphen) with CKEditor

Question

How can I tell CKEditor to insert a soft hyphen (­) with a certain keyboard shortcut, such as Ctrl+- (hyphen) like in Word? I know I can type Alt+0173, but my customer doesn't like that.

Answer 1

CKEditor 4

We'll use CKEditor's built-in keybinding API to map a custom command to the custom keyboard shortcut Ctrl+Shift+- (because Ctrl+- alone triggers the "zoom out" shortcut in many browsers). We'll wrap this all up into a plugin for modularity:

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

This implementation uses the insertHtml() editor method to add the ­ HTML entity to the document at the cursor position when the user presses the key combination. We can initialize a new editor instance with a <textarea name="editor"> that loads our plugin:

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

Here's a demonstration (I had to make this external—code snippets won't work with CKEditor's <iframe>).

CKEditor 5

This version is in alpha at the time of writing, so the API and documentation may not be complete. Version 5 dramatically changes the architecture of the project, including a switch to ES6 for the source code, so I won't demonstrate how to create a plugin for this version (we'd need to build it). Instead, we'll create the same functionality as we would with the plugin when we initialize the editor:

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

Version 5 doesn't seem to include an equivalent to insertHtml() from version 4 yet, so the example uses the Unicode character for the soft hyphen. Here's the demo for v5.

For those interested in creating a custom plugin and command for version 5, see the documentation for the CKEditor 5 Framework. This requires an environment where we can install the framework's npm packages. We'll use ES6 to extend the framework's classes and Webpack to bundle them up.

---

A quick note to address the bounty: we can bind key combinations similarly in 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');
        })
    }
});