Jump to content
alan

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.

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

  • 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

/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

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • 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? 
    • By abdus
      There's native `Fieldset in Tab` for creating editor tabs, but sometimes it could make more sense to put a field that's not directly related to `Content` into `Settings` or `Children` tab (such as for body class or some toggles that I see being used often). You can use the hook below to move fields between the tabs.
       

       
      // site/ready.php wire()->addHookAfter('ProcessPageEdit::buildForm', function (HookEvent $e) { // make sure we're editing a page and not a user if ($e->process != 'ProcessPageEdit') return; // RESTRICT BY TEMPLATE // $page = $e->object->getPage(); // if ($page->template != 'home') return; // RESTRICT BY ROLE // $user = $e->user; // if (!$user->hasRole('editor')) return; $form = $e->return; $contentTab = $form->children->get('id=ProcessPageEditContent'); $settingsTab = $form->children->get('id=ProcessPageEditSettings'); // $childrenTab = $form->children->get('id=ProcessPageEditChildren'); // if page template is set noSettings = true, $settings will not exist if (!$settingsTab) return; // MOVE TITLE FIELD TO SETTINGS TAB $title = $contentTab->get('title'); if (!$title) return; $contentTab->remove('title'); $settingsTab->prepend($title); });  
       
    • By hellomoto
      I have a manufacturers page select field and a dependent models one with pages of template `model` which are allowed children of pages with template `manufacturer`. So I have this as the findPagesCode for the models page options field:
      return $page->manufacturer->children(); However this requires the page be saved in order to display options. This is not ideal. 
      I have a singular autoload module with the following:
      public function init() { $this->pages->addHookAfter('render', $this, 'filterModels'); } public function filterModels($event) { $page = $event->arguments('page'); if($page->template != 'boat_vessel') return; $this->message("models filter"); } It's doing nothing. 
      I was thinking I could work out something with this example but I would need the above test to be working first anyway...
      $this->pages->addHookAfter('changed', function(HookEvent $event) { $page = $event->object; $change = $event->arguments(0); if($page->template == 'boat_vessel' && $change == 'manufacturer') { // execute some code } }); But what? How do I refresh the models field?
      Is there a way to do this in the field settings? I would think in the custom PHP textarea that `return $page->manufacturer->children();` would work but it doesn't. 
×
×
  • Create New...