How to change keyboard shortcuts with TinyMCE APIs

Hotkeys and keyboard shortcuts – without them, you'd be losing time and energy digging through endless menus. And that’s just the worst. But TinyMCE has a solution for this.

TinyMCE has an addShortcut API to set up custom keyboard shortcuts, and this article explains how to set up some shortcut examples.

What keyboard shortcut configurations to make

If you haven’t already, sign up for a FREE API key. This stops warning errors when testing TinyMCE. It also grants you access to TinyMCE Premium Plugins for 14 days like Advanced Source Code editing and clean copy and paste with PowerPaste.

This demo makes a highlighter keyboard shortcut:

1. Open a new index.html file
2. Include the TinyMCE CDN link, and the tinymce.init script:

  <script src="https://cdn.tiny.cloud/1/add-your-apikey/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: 'textarea#custom-shortcut'
  )};
  </script>

3. In the tinymce.init script, create a function with the addShortcut API contained within it:

<script>
  tinymce.init({
  selector: 'textarea#custom-shortcut',
  height: 300,
  setup: function (editor) {
         editor.addShortcut('ctrl+alt+y', 'Add yellow highlight to selected text.', function () {
           editor.execCommand('hilitecolor', false, '#FFFF00');
          });
        },
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
      });
</script>

4. Add the text area to the body section of the HTML file:

<textarea id="custom-shortcut">
  <p>To add a yellow highlight to this text:</p>
  <ul>
    <li>
      Select some text
      <ul>
        <li>On PC, press: Ctrl+Alt+Y</li>
        <li>On MacOS, press: Command+Option+Y</li>
      </ul>
    </li>
  </ul>
</textarea>;

5. Save the changes, and open the file in a browser. 

Note: As a reminder, you can run the file from the local host on port 8000 using the python command: python -m http.server 8000

Customizing the shortcut 

The function currently runs the execCommand method with the hilitecolor action. Do you need to change the rich text editor appearance though? The addShortcut API can do that with the ToggleFormat method, and the following demo makes a handy shortcut for styling with <code> tags.

1. Locate the following line within the highlight text function and shortcut set up earlier and change the function keyboard shortcut, and the execCommand method:

setup: function (editor) {
                  editor.addShortcut('ctrl+alt+I', 'code Keyboard Shortcut', function () {
                        editor.execCommand('mceToggleFormat', true, 'code');
                   });
                },

2. Save the changes, and try out the code markup shortcut with ctrl+alt+I

What shortcuts to try next

If you had different styles you wanted to try, then it’s worth checking on the execCommand list of methods. Try out another style and shortcut to save time in modifying text in your WYSIWYG.

When you sign up for a FREE API key, you get features like advanced code editing to have more in depth control of your text area styling. Take a look at the Premium Plugins today.