Hotkeys and keyboard shortcuts – without them, you'd be losing time and energy digging through endless menus. And that’s just the worst. But TinyMCE has a solution for this.
TinyMCE has an addShortcut
API to set up custom keyboard shortcuts, and this article explains how to set up some shortcut examples.
What keyboard shortcut configurations to make
If you haven’t already, sign up for a FREE API key. This stops warning errors when testing TinyMCE. It also grants you access to TinyMCE Premium Plugins for 14 days like Advanced Source Code editing and clean copy and paste with PowerPaste.
This demo makes a highlighter keyboard shortcut:
- Open a new
index.html
file - Include the TinyMCE CDN link, and the
tinymce.init
script:
<script src="https://cdn.tiny.cloud/1/add-your-apikey/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">
tinymce.init({
selector: 'textarea#custom-shortcut'
)};
</script>
-
In the
tinymce.init
script, create a function with the addShortcut API contained within it:
<script>
tinymce.init({
selector: 'textarea#custom-shortcut',
height: 300,
setup: function (editor) {
editor.addShortcut('ctrl+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 }'
});
</script>
-
Add the text area to the body section of the HTML file:
<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>;
-
Save the changes, and open the file in a browser.
Note: As a reminder, you can run the file from the local host on port 8000 using the python command: python -m http.server 8000
Customizing the shortcut
The function currently runs the execCommand method with the hilitecolor action. Do you need to change the rich text editor appearance though? The addShortcut API can do that with the ToggleFormat method, and the following demo makes a handy shortcut for styling with <code>
tags.
-
Locate the following line within the highlight text function and shortcut set up earlier and change the function keyboard shortcut, and the
execCommand
method:
setup: function (editor) {
editor.addShortcut('ctrl+alt+I', 'code Keyboard Shortcut', function () {
editor.execCommand('mceToggleFormat', true, 'code');
});
},
-
Save the changes, and try out the code markup shortcut with
ctrl+alt+I
What shortcuts to try next
If you had different styles you wanted to try, then it’s worth checking on the execCommand list of methods. Try out another style and shortcut to save time in modifying text in your WYSIWYG.
When you sign up for a FREE API key, you get features like advanced code editing to have more in depth control of your text area styling. Take a look at the Premium Plugins today.