---
title: "Custom Keyboard Shortcuts"
description: "How-to add custom keyboard shortcuts to TinyMCE 8."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/shortcuts/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/shortcuts/index.md"
version: "latest"
last_updated: "2024-04-09T09:02:56Z"
tokens: 777
---
# Custom Keyboard Shortcuts

> **Important:** 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:

- [The `tinymce.Editor.addShortcut` API](../apis/tinymce.editor/#addShortcut).
- [The `tinymce.Shortcuts.add` API](../apis/tinymce.shortcuts/).

## 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

**Example**

```js
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.

**Example**

```js
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.

**Example**

```js
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 }'
});
```