3

I want to disable all TinyMCE 4 keyboard shortcuts. I have looked around for a workable solution but only realised how poor the TinyMCE documentation is. 

I did find one answer here but either I do not know how to apply it or it doesn't work with TinyMCE 4 (that was introduced with WP 3.9+). 

Anyone with reasonable TinyMCE and WP knowledge who can crack this?

3
+50

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
});
  • Works. However, does the solution linked in the question still work? That approached seem to be the official way of disabling the shortcuts... – Christine Cooper Nov 14 '14 at 15:20
  • 1
    The flag "custom_shortcuts" doesn't exist, so there doesn't seem to be an official way. I've just tried a variation of the "foo" command way given, and it would work, though you'd have to specify each shortcut you want to disable, and the shortcut commands would still capture the key sequence (so eg "ctrl+b" wouldn't bring up your bookmarks in Firefox). I could update the answer with that method if you like... – bonger Nov 14 '14 at 17:06
  • Yes, please do update your answer with this alternative solution so we have as complete answer as possible for this bounty. When considering performance, do both solutions carry the same weight? – Christine Cooper Nov 14 '14 at 18:51
  • Ok, added a version of the alternative solution. Also removed "crude" from the original solution seeing as it might put people off! Re performance, it's negligible really, though the first solution would win as nothing gets executed. – bonger Nov 14 '14 at 19:30
  • 1
    Oh so it doesn't - not much use then! It seems that because the edit box is contenteditable, certain browsers (chrome as you say & also IE) will implement their own shortcuts to do certain formatting. I'll update the answer, demoting the first solution, soon when I get more info... Thanks! – bonger Dec 3 '14 at 17:03
0

Id just thought id share: I am using tinymce in the frontend via wp_editor() I have unset the keyboard shortcuts like insert/edit link etc or help and i am using:

<?php
                            $content = $posted['rm_details'];
                            $editor_id = 'rm_details';
                            $settings = array(
                                'media_buttons'     => false,
                                'drag_drop_upload'  => false,
                                'textarea_rows'     => '15',
                                'tinymce' => array(
                                    'content_css'               => get_template_directory_uri() . '/styles/tinymce5.css',
                                    'toolbar1'                  => 'bold,bullist,numlist',
                                    'toolbar2'                  => '',
                                    'paste_word_valid_elements' => 'p,b,strong,li,br',
                                    'plugins'                   => '',
                                ),
                                'quicktags'         => false
                            );
                            wp_editor( esc_textarea( $content ), $editor_id, $settings ); ?>

Setting 'plugins' => '', seems to do the trick.

Also this seems to enable the default browser shortcuts for me,

Thanks

Nathan

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.