Jump to content

Simplest way to add or edit a TinyMCE keyboard shortcut

Recommended Posts

I was delighted to find when editing copy in a TinyMCE window that with the cursor in a block of text marked up with a Paragraph tag, pressing Cmd+2 (on a Mac) will on-the-fly change this to an H2 tag. Cmd+3 for H3, etc.

Can anyone point me toward the easiest way to change and existing shortcut I don't use, such as Cmd+5 (H5) to blockquote? Or, if that's not possible, how to add a new keyboard shortcut.

I've Googled and tried things but to no avail.

Ideally I'm looking for a solution that just involves edits to the field settings in the admin but if the only way is by adding extra files under /site then no problem.

Thanks in advance for any pointers. Cheers, -Alan

  • Like 1

Share this post

Link to post
Share on other sites

That's a new trick I didn't know about -- I like it. :) I have no idea how to do what you are asking, but guessing Soma (our resident TinyMCE expert) might.

Share this post

Link to post
Share on other sites

Yes I used Soma's post to add the ability for editors to add classes to content, brilliant, so I'll bet he may know the answer to this one too.

Share this post

Link to post
Share on other sites

Soma to the rescue. Actually I'm not a TinyMCE expert, but working with PW pushed me to get into it, since there were a couple bugs in PW implementation for IE. Having clients that work with IE8-9 made me take care of it even if I didn't wanted.

Ok here it comes:

I quickly searched and looked at how shortcuts are implemented in TinyMCE, and since 3.+ there's a addShortcut command.


These are the shortcuts currently in TinyMCE:

ctrl+z Undo

ctrl+y Redo

ctrl+b Bold

ctrl+i Italic

ctrl+u Underline

ctrl+1-6 h1-h6

ctrl+7 p

ctrl+8 div

ctrl+9 address

(ctrl on Mac = cmd)

I quickly created plugin you can use to define your own. It's different for Mac than Windows, and also Browser dependent I think.

Install this plugin as you would for the bramus_cssextras. Same procedure.

Here's the plugin code and attached for dowload. For finding commands you can search the tiny_mce_src.js.

This plugin will add a shortcut ctrl+e to format a block as a blockquote.

// Create a new plugin class

   tinymce.create('tinymce.plugins.SomaShortcuts', {
       init : function(ed, url) {
           ed.addShortcut('ctrl+e','Format Blockquote', ['FormatBlock', false, 'blockquote'], this);

   // Register plugin with a short name
   tinymce.PluginManager.add('soma_shortcuts', tinymce.plugins.SomaShortcuts);



  • Like 1

Share this post

Link to post
Share on other sites
Soma to the rescue

Fantastic :D Off to go try this out, thanks SO much Soma you're a star!

Share this post

Link to post
Share on other sites

Installed! :D

Thank you SO much Soma, I owe you (again!) for saving me there, I will have less chance of RSI from constantly clicking paragraphs into blockquotes.

-Happy and grateful Alan

Share this post

Link to post
Share on other sites

For those that also do this I followed Soma's instructions, so under


I now have two folders:




and in the field's TinyMCE settings, under 'Third-party plugins', I simply added:

soma_shortcuts: /site/tinymce/plugins/soma_shortcuts

  • Like 1

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By flydev 👊🏻
      I would like to present you a new module which aim to facilitate the productivity of your editors/publishers when working on ProcessWire.
      The idea begun when my co-worker told me that when typing in ProcessWire CkEditor field he was feeling "loosing motivation" when writing big wall of text and/or inspiration. So he opened his web-browser and show me a site looking to Wordpress - feel free to put your preferred emoji here - then he opened Gutenberg... typed some text and moving some "blocks".
      I understood immediately why he got this feeling with CkEditor. If you or your client feel like this guy, then you will love this module !
      What is currently supported ?
      Auto-save Medias upload support HannaCode support Blocks Implemented
      Heading Image Paragraph Embed Quote Code Link Table (beta) Block Delimiter Raw HTML Note (custom block markup) Feature Request
      Frontend Edition   
      And there you go for the preview - sorry I am to lazy and bad at typing text so I had a copy/pasta moment :

      Module featured in the ProcessWire Weekly #317 - Thanks @teppo
    • By DV-JF
      Hey girls and guys,
      I'll want to open this thread in order to discuss a main problem I've run into with following setup:
      I'm maintaining a site where different URLs are directed to the same folder. In site/ready.php the $user->language is set based on the $config->httpHost
      <?php /* Set language based on the domain and user is not logged in */ /* Slovenian */ if( $config->httpHost == "www.domain.si" || $config->httpHost == "domain.si" || $config->httpHost == "domain.si.local") { if (!($user->isSuperuser())) $user->language = $languages->get('si'); } /* German */ elseif( $config->httpHost == "www.domain.at" || $config->httpHost == "domain.at" || $config->httpHost == "domain.at.local" || $config->httpHost == "domain.ch" || $config->httpHost == "www.domain.ch" || $config->httpHost == "domain.de" || $config->httpHost == "www.domain.de") { if (!($user->isSuperuser())) $user->language = $languages->get('default'); } /* Croatian */ elseif( $config->httpHost == "www.domain.hr" || $config->httpHost == "domain.hr" || $config->httpHost == "domain.hr.local") { if (!($user->isSuperuser())) $user->language = $languages->get('hr'); } /* English */ elseif( $config->httpHost == "www.domain.eu" || $config->httpHost == "domain.eu" || $config->httpHost == "domain.eu.local") { if (!($user->isSuperuser())) $user->language = $languages->get('en'); } /* Italian */ elseif( $config->httpHost == "www.domain.it" || $config->httpHost == "domain.it" || $config->httpHost == "domain.it.local") { if (!($user->isSuperuser())) $user->language = $languages->get('it'); } The homepage (id=1) has following settings:

      As you can see German (Deutsch) is set as default language. Everything is working nice and fine and I'm really happy with this kind of setup but now there are some new requirements, which causes me quite a headache :
      I've to add some pages only in one or two languages (they should not be present in German) I've to create some editor roles that are allowed to only edit (can be done with https://processwire.com/docs/user-access/permissions/#multi-language-page-edit-permissions) & add pages to their specific language. What I've found out so far:
      The default language can't be disabled and must always be present (though this would be in my eyes the easiest solution) Creating my own "language select field" - example here: won't work in this case because I've to rely on the native languages in order to setup the right permissions for editors. There seems to be some solutionsbut I think these won't match for me because I've to think about handling editors and permissions, too. After searching and searching, scratching my head and searching and searching again, the only possibility that comes to my mind is to add another language for German and assign this language to the specific URL's instead of the default language.
      The advantages with this solution for me:
      I could activate or deactivate any language on any page Editors which are allowed to add pages can get the permission page-edit-lang-default without affecting the German pages. The disadvantages:
      All multi-language-fields will have an empty tab for the default language - this may irritate editors a lot Seems to me like a lot of work to do because I've to copy the language field nearly for 1000 pages/repeaters (maybe I'll find an SQL query) My questions:
      How would you handle this task? Could my setup be optimized in a completely different way? If I go for my solution (adding another language for German) would it be possible to hide the language tab for default language in any way?  If some points aren't clear enough please don't hesitate to ask.
      Many greets...
    • By Mustafa-Online
      Did any one tried to integrate "WordPress New Editor" into ProcessWire ??
      I did some searches and I found this Repo on Github: https://github.com/front/drupal-gutenberg Which allows Drupal Users to use Gutenberg.
      Any Thoughts ?

    • By MilenKo
      Hello guys.
      I've decided to get brave and start my first delayed output profile for a remake of my knowledge sharing profile. It went all.good so far but I decided to make it multilingual as to fit the users needs.
      For starters, added a field named: image_single and limited the input to one image as this would be used for the logo. Added.the markup to allow the front end editing (method D or direct edit tag to the <img>. After double clicking on the image, I see the pop-up showing up for a second and then closes. As far as there are no errors in the logs, I am a bit stuck to find the reason. I've read earlier that some users had issues with multilingual fields but could not find anything to point me to the right direction. Any ideas or suggestions?
    • By pwuser1
      Hi people I think I have seen them all but maybe I missed some of the just wanted to know what do you recommend for an editor with JQuery autocompletion or support? 
  • Create New...