Simplest way to add or edit a TinyMCE keyboard shortcut

[alan]

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

[ryan]

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.

[alan]

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.

[Soma]

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.

http://www.tinymce.c...tor.addShortcut

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
(function(){

   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);
})();

Cheers.

soma_shortcuts.zip

[alan]

Soma to the rescue

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

[alan]

Installed!

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

[alan]

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

/site/tinymce/plugins/

I now have two folders:

/bramus_cssextras/

and

/soma_shortcuts/

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

soma_shortcuts: /site/tinymce/plugins/soma_shortcuts