NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.
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 |
Note: 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
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:
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.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.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 }'
});
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.