CKEditor 5 Insert Text Keyboard Shortcut

Demonstrates how to extend the CKEditor (v5) 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/ckeditor5/1.0.0-alpha.2/classic/ckeditor.js"></script>
<h1>CKEditor 5 Example</h1>
<h2>Press <kbd>CTRL SHIFT -</kbd> to insert a word containing a soft hyphen.</h2>
<textarea id="editor1"></textarea>
<p>
    This inserts a soft hyphen between "foo" and "bar". Use the browser's developer tools to inspect the text area's HTML markup to reveal 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

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: 'foo' });
            editor.execute('input', { text: softHyphen });
            editor.execute('input', { text: 'bar...' });
        });

    })
    .catch(function (err) {
        console.error( err.stack );
    });