Keyboard shortcuts

Editor keyboard shortcuts

This is a list of available keyboard shortcuts within the editor body.

Action PC Mac Core/Plugin

Bold

Ctrl+B

Command+B

core

Italic

Ctrl+I

Command+I

core

Underline

Ctrl+U

Command+U

core

Select All

Ctrl+A

Command+A

core

Redo

Ctrl+Y / Ctrl+Shift+Z

Command+Y / Command+Shift+Z

core

Undo

Ctrl+Z

Command+Z

core

Header 1

Alt+Shift+1

Ctrl+Option+1

core

Header 2

Alt+Shift+2

Ctrl+Option+2

core

Header 3

Alt+Shift+3

Ctrl+Option+3

core

Header 4

Alt+Shift+4

Ctrl+Option+4

core

Header 5

Alt+Shift+5

Ctrl+Option+5

core

Header 6

Alt+Shift+6

Ctrl+Option+6

core

Paragraph

Alt+Shift+7

Ctrl+Option+7

core

Div

Alt+Shift+8

Ctrl+Option+8

core

Address

Alt+Shift+9

Ctrl+Option+9

core

Focus to menu bar

Alt+F9

Option+F9

core

Focus to toolbar

Alt+F10

Option+F10

core

Focus to element path

Alt+F11

Option+F11

core

Focus to contextual toolbar

Ctrl+F9

Ctrl+F9

core

Open the help dialog

Alt+0

Option+0

help

Insert link

Ctrl+K

Command+K

link

Toggle Fullscreen

Ctrl+Shift+F

Command+Shift+F

fullscreen

Save

Ctrl+S

Command+S

save

Find

Ctrl+F

Command+F

searchreplace

Accessibility keyboard shortcuts

This is a list of available keyboard shortcuts within the editor user interface.

Action PC Mac

Execute command

Enter / Spacebar

Enter / Spacebar

Focus on next UI Element
(such as: Menu bar, Toolbar, Toolbar Group, Status Bar Item)

Tab

Tab

Focus on previous UI Element
(such as: Menu bar, Toolbar, Toolbar Group, Status Bar Item)

Shift+Tab

Shift+Tab

Focus next Control
(such as: toolbar button, menu, or menu item)

Right Arrow / Down Arrow

Right Arrow / Down Arrow

Focus previous Control
(such as: toolbar button, menu, or menu item)

Left Arrow / Up Arrow

Left Arrow / Up Arrow

Open menu or toolbar menu button

Down Arrow / Spacebar

Down Arrow / Spacebar

Open group toolbar button

Spacebar

Spacebar

Open split toolbar button

Down Arrow

Down Arrow

Open the popup menu on split toolbar buttons

Shift+Enter

Shift+Enter

Open submenu

Right Arrow

Right Arrow

Close submenu

Left Arrow / Esc

Left Arrow / Esc

Close dialog

Esc

Esc

Close menu

Esc

Esc

Move focus back to editor body

Esc

Esc
Browsers and Screen Readers provide additional shortcuts within the editor context.

Advanced Code Editor search and replace keyboard shortcuts

Advanced Code Editor provides the following shortcuts for search and replace within the code dialog.

Action PC Mac

Find

Ctrl+F

Command+F

Find next instance

Ctrl+G

Command+G

Find previous instance

Shift+Ctrl+G

Shift+Command+G

Replace

Ctrl+H

Command+Option+F

Replace All

Shift+Ctrl+R

Shift+Command+Option+F

Add custom shortcuts to TinyMCE

Adding a custom shortcut with a keyboard combination that conflicts with an existing TinyMCE or browser shortcut will override the existing shortcut.

To add a custom keyboard shortcut to TinyMCE, use either:

Shortcut modifier key mappings

When creating shortcuts for TinyMCE, the following modifiers can be used. Some modifiers map to different keys, depending on the user’s operating system.

Modifier PC macOS

Meta

Ctrl

Command

Shift

Shift

Shift

Ctrl

Ctrl

Control

Alt

Alt

Option

Access

Shift+Alt

Control+Option

Example: Custom keyboard shortcut

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<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>
tinymce.init({
  selector: 'textarea#custom-shortcut',
  height: 300,
  setup: function (editor) {
    editor.addShortcut(
      'meta+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 }'
});

Example: Adding a custom shortcut for a menu item

When adding a shortcut for a custom menu item, add both a custom shortcut and a custom menu item. To display the shortcut on a custom menu item, add the shortcut configuration option when creating the menu item.

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="custom-shortcut-2">
  <p>To insert "@username":</p>
  <ul>
    <li>Click the <em>plus</em> toolbar button and select <strong>Insert username</strong>.</li>
    <li>On macOS, use the keyboard shortcut: Command+Option+U.</li>
    <li>On Windows or Linux, use the keyboard shortcut: Ctrl+Alt+U.</li>
  </ul>
</textarea>
tinymce.init({
  selector: '#custom-shortcut-2',
  height: 300,
  plugins: 'autolink lists link',
  toolbar: 'undo redo | bold italic link bullist | insertUsername',
  setup: function (editor) {
    var insertUsername = function () {
      editor.insertContent(`@username`);
    };

    editor.addShortcut('meta+alt+U', 'Insert username', function () {
      insertUsername();
    });

    editor.ui.registry.addMenuButton('insertUsername', {
      icon: 'plus',
      fetch: function (callback) {
        var items = [
          {
            type: 'menuitem',
            text: 'Insert username',
            shortcut: 'meta+alt+U',
            onAction: function () {
              insertUsername();
            }
          }
        ];
        callback(items);
      }
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});