Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to change keyboard shortcuts with TinyMCE APIs

Joe Robinson

May 10th, 2022

Written by

Joe Robinson

Category

How-to Use TinyMCE

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>
  1. 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>
  1. 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>;
  1. Save the changes, and open the file in a browser. 

keyboard shortcut showing highlighting with TinyMCE

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');
                   });
                },
  1. Save the changes, and try out the code markup shortcut with ctrl+alt+I

Adding

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.

APIWYSIWYGTinyMCEJavascript
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCE

    How to set up a CMS with Self-Hosted and Cloud TinyMCE

    by Joe Robinson in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing