CKEditor Insert Text Keyboard Shortcut

Demonstrates how to extend the CKEditor (v4) to insert some text by using a keyboard shortcut (the soft hyphen, in this case).

by Cy Rossignol

HTML

<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<h1>CKEditor 4 Example</h1>
<h2>Press <kbd>CTRL SHIFT -</kbd> to insert a word containing a soft hyphen.</h2>
<textarea name="editor1"></textarea>
<p>
This inserts a soft hyphen between "foo" and "bar". Click on the "Source" button afterward to view the HTML markup which reveals the <code>&amp;shy;</code> HTML entity.
</p>
<p>
For more information, see <a href="https://stackoverflow.com/q/34491100/5209322">this Stack Overflow question</a>.
</p>

JavaScript

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.insertText('foo');
                editor.insertHtml('&shy;');
                editor.insertText('bar...');
            }
        });
        
        editor.keystrokeHandler.keystrokes[shortcutKeys] = 'insertSoftHyphen';
    }
});

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