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 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? 
    • 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); });  
       
×
×
  • Create New...