How to disable TinyMCE 4 keyboard shortcuts

Re answer cited by the OP:

Edited to add meta and access and other.

The custom_shortcuts flags mentioned was in tinymce 3.x (see here) but was removed from 4.x, and on scanning the source nothing equivalent seems to have been substituted.

The foo function method mentioned can still be used. In your theme’s “functions.php”:

add_action( 'wp_tiny_mce_init', function () {
    ?>
    <script>
        function wpse167402_tiny_mce_init(ed) {
            ed.on('init', function () {
                // Note these lists may not be complete & that other tinymce plugins can add their own shortcuts anyway.
                var ctrls = [ 'b', 'i', 'u', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'z', 'y,ctrl+shift+z', 's', 'k', 'Alt+F', 'P', 'shift+e > ctrl+shift+p' ]; // Could add 'x', 'c', 'v'.
                var metas = [ 'b', 'i', 'u', 'z', 'y,meta+shift+z', 's', 'k' ]; // Could add 'x', 'c', 'v'.
                var modKeys = [ 'c', 'r', 'l', 'j', 'q', 'u', 'o', 'n', 's', 'm', 'z', 't', 'd', 'h', 'o', 'x', 'a', 'w' ];
                var accesss = [ '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 's', 'c', 'r', 'l', 'j', 'q', 'u', 'o', 'm', 'z', 't', 'd', 'h', 'p', 'x' ];
                var others = [ 'Ctrl+Shift+F', 'Meta+K', 'alt+119', 'Alt+F10', 'Alt+F9', 'Alt+F10,F10', 'Alt+F11' ];
                var i;

                // Overwrite shortcuts with no-op function. Key sequences will still be captured.
                for (i = 0; i < ctrls.length; i++ ) {
                    this.addShortcut('ctrl+' + ctrls[i], '', function () {});
                }
                for (i = 0; i < metas.length; i++ ) {
                    this.addShortcut('meta+' + metas[i], '', function () {});
                }
                for (i = 0; i < modKeys.length; i++ ) {
                    this.addShortcut('alt+shift+' + modKeys[i], '', function () {});
                }
                for (i = 0; i < accesss.length; i++ ) {
                    this.addShortcut('access+' + accesss[i], '', function () {});
                }
                for (i = 0; i < others.length; i++ ) {
                    this.addShortcut( others[i], '', function () {});
                }
            });
        }
    </script>
    <?php
});
function wpse167402_tiny_mce_before_init( $mceInit ) {
    $mceInit['setup'] = 'wpse167402_tiny_mce_init';
    return $mceInit;
}
add_filter( 'tiny_mce_before_init', 'wpse167402_tiny_mce_before_init' );

Original answer

The original answer replaced the editor’s shortcuts object with a no-op (the SettupEditor event is fired before any tinymce instances are created):

add_action( 'wp_tiny_mce_init', function () {
    ?>
    <script>
    tinymce.on('SetupEditor', function (editor) {
        editor.shortcuts = { add: function() {} };
    });
    </script>
    <?php
});

Although this disables all tinymce’s shortcuts, it has the unfortunate side-effect of allowing default browser behaviour, which for contentEditable elements (which the tinymce’s edit box is marked as) can include various formatting such as ctrl+b, ctrl+i, and ctrl+u (documentation on this is very poor), depending on the browser. A way around this, which makes this answer basically the same as the first, is to just pass on the shortcuts to the original function with the cmdFunc replaced by a noop function:

add_action( 'wp_tiny_mce_init', function () {
    ?>
    <script>
    tinymce.on('SetupEditor', function (editor) {
        var orig_shortcuts_add = editor.shortcuts.add;
        editor.shortcuts.add = function(pattern, desc, cmdFunc, scope) {
            return orig_shortcuts_add(pattern, desc, function () {}, scope);
        };
    });
    </script>
    <?php
});

Leave a Comment