Custom Keyboard Shortcuts

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: (editor) => {
    editor.addShortcut('meta+alt+y', 'Add yellow highlight to selected text.', () => {
      editor.execCommand('hilitecolor', false , '#FFFF00');
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

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: (editor) => {
    const insertUsername = () => {
      editor.insertContent(`@username`);
    };

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

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

Example: adding a custom shortcut for a toolbar button

To include the keyboard shortcut information in the tooltip for a custom toolbar button, add the shortcut configuration option when creating the toolbar button.

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="custom-shortcut-3">
  <p>Hover on the <em>plus</em> toolbar button to see the shortcut in its tooltip.</p>
  <p>To insert "@username":</p>
  <ul>
    <li>Click the <em>plus</em> toolbar button.</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-3',
  height: 300,
  plugins: 'autolink lists link',
  toolbar: 'undo redo | bold italic link bullist | insertUsername',
  setup: (editor) => {
    const insertUsername = () => {
      editor.insertContent(`@username`);
    };

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

    editor.ui.registry.addButton('insertUsername', {
      icon: 'plus',
      tooltip: 'Insert Username',
      shortcut: 'meta+alt+U',
      onAction: insertUsername,
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});