CODEWITHSUNDEEP
tinymcekeyboard-shortcutstinymce-4
glass duo
glass duo

Reputation: 414

How do I implement tinymce.Shortcuts in TinyMCE v4

I want to add keyboard shortcuts to my TinyMCE editor.

Here is my init code:

tinymce.init({
    selector: 'textarea',
    menubar: false,
    mode : "exact",
    plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code',
    'print'
    ],
    toolbar: 'print | styleselect | bullist numlist',
});

I know that I need something along the lines of:

editor.shortcuts.add('ctrl+a', function() {});

But I don't understand how to connect the shortcuts code with my init code.

TinyMCE documentation here, but I was having trouble understanding it.

Upvotes: 2

Views: 1044

Answers (3)

MagTun
MagTun

Reputation: 6195

As a complement to the two previous answers, here is a full example: 

tinymce.init({
//here you can have selector, menubar...
setup: function (editor) {
       setLocale(editor);
            // For the keycode (eg. 13 = enter) use: cf http://keycode.info 
            editor.shortcuts.add('ctrl+13', 'indent', function(){      
                tinymce.activeEditor.execCommand('indent');
            });

            editor.shortcuts.add('ctrl+f', 'subscript ', function(){      
                tinymce.activeEditor.execCommand('subscript');
            });
        },
        });

Upvotes: 1

glass duo
glass duo

Reputation: 414

This is an expansion of the answer @Thariama provided. Code that worked for me was: 

tinymce.init({
    selector: 'textarea',
    menubar: false,
    mode : "exact",
    setup: function(editor) {
        editor.shortcuts.add('ctrl+a', desc, function() { //desc can be any string, it is just for you to describe your code.
            // your code here
        });
    },
    plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code',
    'print'
    ],
    toolbar: 'print | styleselect | bullist numlist',
});

Alternatively you can also use the following, which will allow you to override key commands reserved by TinyMCE:

tinymce.init({
    selector: 'textarea',
    menubar: false,
    mode : "exact",
    setup: function(e) {
      e.on("keyup", function(e) {
        if ( e.keyCode === 27 ) {  // keyCode 27 is for the ESC key, just an example, use any key code you like
          // your code here
        }
      });
    },
    plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code',
    'print',
    ],
    toolbar: 'print | styleselect | bullist numlist',
});

Upvotes: 1

Thariama
Thariama

Reputation: 50832

Here is how to do it:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML

  // add your shortcuts here
  setup: function(editor) {
    editor.shortcuts.add('ctrl+a', function() {});
  }
});

Use the setup init parameter!

Upvotes: 1

Related Questions