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

How to navigate TinyMCE with just a keyboard

Joe Robinson

July 6th, 2021

Written by

Joe Robinson

Category

How-tos & Tutorials

Keyboard shortcuts can be an incredible timesaver. For instance, if you need to quickly highlight a word, you can hold down the shift key while pressing the right arrow, and then release it to stop highlighting. Saves you having to reach for the mouse!

In web design, keyboard-only accessibility is essential. Why? Because both users with disabilities and those with temporary mobility limits need it. And for users who like to move around an interface efficiently, there’s no better alternative. Accessibility has been a part of text entry since the invention of text entry devices, after all.

When building a web application, your users must be able to move between links, buttons, forms, and other elements using a few keystrokes...say the tab key and arrow keys for instance.

It’s not just a good idea to follow. The W3C Accessibility Initiative – the organization that brings together experts in design to develop and maintain core standards for accessibility – recommends the use of keyboard navigation.

At TinyMCE, we follow the Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) specifications – which are published and maintained by W3C. The specifications make our rich text editor interface easy to navigate with just a keyboard, and this guide steps you through how to navigate the TinyMCE editor with your keyboard.

Why you need to know about focus

When we refer to focusing on the editor, it means that the cursor is in the editor space, and it’s ready to receive text input. When you click on an element, or in the TinyMCE editor space, it has ‘focus’. When you click off it, it loses focus. This is true for all keyboard navigation.

As long as you have focus inside the TinyMCE editor, you can use keyboard shortcuts and navigation to activate features, and move around the menu bar.

How to navigate into the editor 

The three essential key combinations to know about are the three function keys: F9F10, and F11. You will also need to use the arrow keys for movement, and the Escape key for returning to the editor.

Editor Action

PC

macOS

Go directly to the menu bar

Alt + F9

Option + F9

Navigate into the toolbar (followed by the arrow keys to move across icons)

Alt + F10

Option + F10

Focus on an element path

Alt + F11

Option + F11

Focus on the editor 

When you’re on your application page, use the tab key to select the text editor, and place the cursor inside the text editor. From there, you can focus on the menu bar by using the Alt + F9 or Option + F9 key combinations.

Navigate the menu bar 

Once the focus changes to the menu bar, you can then use the right arrow key and left arrow key to move around. Use Enter, ReturnSpacebar, or the down arrow keys to open a menu item when it’s highlighted.

Navigate the toolbar

You can select the toolbar icons with the Alt + F10 or Option + F10 key and use the left and right arrow keys to jump from icon to icon. If the toolbar is separated into icon groups, use the Shift + tab or just the tab key to move to another group of toolbar icons. The selection wraps around, so that when you reach the end of the toolbar, pressing the right key again will return to the start of the toolbar.

Return to the editor

You can return to writing in the editor after accessing the menu by pressing the escape key. This works from both the menu bar and toolbar.

Custom shortcuts

It’s possible to set up a custom shortcut by configuring an editor.addshortcut function. For example, you can set up a shortcut to highlight text in yellow: 

<script src="https://cdn.tiny.cloud/1/add-your-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">

tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists checklist link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste" ],
menubar: "view",
toolbar: "preview | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | checklist",

setup: function (editor) { /* use setup: function */ 
    editor.addShortcut(  /* add.Shortcut incorporates a shortcut function into your rich text editor. Set up the keyboard shortcut, and use a function () with the editor.execCommand. */
    'meta+alt+y', 'Add yellow highlight to selected text.',
    function () { editor.execCommand('hilitecolor', false, '#FFFF00'); /* Include the effects of the keyboard shortcut you need here */
    });
  },
});
TinyMCE custom shortcut to highlight text in yellow

Our documentation delivers more information on custom keyboard shortcuts. If you’re looking for more information about how TinyMCE deliverse accessibility for users, contact us, or read more about our accessibility initiatives.

TinyMCEAccessibility
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-tos & Tutorials

    How to integrate TinyMCE with jQuery

    by Joe Robinson in How-tos & Tutorials
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© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing