10

What is the keyboard shortcut key for updating a page or post? It could save me a lot of time as rolling down a page draft is time consuming.

9

I was curious about this and checked the Codex on keyboard shortcuts, but didn't find it mentioned there.

I searched and found out that this seems to be already solved, e.g. here and here.

I haven't tested out these other plugins so I'm not sure how they solve it, but I decided to take on the challenge and see how this could be solved ;-)

So here's my hack for creating shortcuts for:

ctrl+s : Save Draft
ctrl+p : Publish / Update

with the following test plugin that runs within the after_wp_tiny_mce hook:

/**
 * Plugin Name: Testing ctrl+s and ctrl+p for saving and publishing posts.
 * Plugin URI:  https://wordpress.stackexchange.com/a/199411/26350
 */
add_action( 'after_wp_tiny_mce', function()
{?><script>
    ( function ( $ ) {
        'use strict';
        $( window ).load( function () {
            wpse.init();
        });
        var wpse = {
            keydown : function (e) {
                if( e.ctrlKey && 83 === e.which ) {
                    // ctrl+s for "Save Draft"
                    e.preventDefault();
                    $( '#save-post' ).trigger( 'click' ); 
                } else if ( e.ctrlKey && 80 === e.which ) {
                    // ctrl+p for "Publish" or "Update"
                    e.preventDefault();
                    $( '#publish' ).trigger( 'click' );
                }
            },
            set_keydown_for_document : function() {
                $(document).on( 'keydown', wpse.keydown );
            },
            set_keydown_for_tinymce : function() {
               if( typeof tinymce == 'undefined' )
                   return;
               for (var i = 0; i < tinymce.editors.length; i++)
                   tinymce.editors[i].on( 'keydown', wpse.keydown );
           },
           init : function() {
               wpse.set_keydown_for_document();
               wpse.set_keydown_for_tinymce();
           }
       }                                                        
    } ( jQuery ) );
    </script><?php });

I added the wpse.keydown event-callback to every tinymce editor on the page, so the shortcuts would be available from there too.

Note that I use the after_wp_tiny_mce hook, as a convinient test-hook on a vanilla install, since we're dealing with the tinymce javascript object. When we ship such a plugin, we should enqueue it from a .js file, as usual.

We could also use the SetupEditor event of tinymce, as mentioned here by @bonger, but here I've added an extra check to see if tinymce is defined, to avoid javascript error on pages where it's not defined:

// Keydown for tinymce
if( typeof tinymce != 'undefined' )
{
    tinymce.on( 'SetupEditor', function (editor) {
        wpse.set_keydown_for_tinymce();
    });
}
// Keydown for document
wpse.set_keydown_for_document();

We could probably setup native tinymce shortcuts as well.

This might need some testing & adjustments, but it seems to work on my install.

5
  • ps: just want to mention that if the page is loaded in Text mode and then switched back to the Visual mode, the tinymce keydown event will not fire. – birgire Aug 23 '15 at 1:36
  • What's the reasoning behind hooking this to tinymce and not to the post edit screen? – Jan Beck Aug 26 '15 at 21:36
  • Good question. Since I'm dealing with the tinymce javascript object, then I thought after_wp_tiny_mce would be a handy test-hook for a vanilla install, where I don't expect remove_post_type_support( 'post', 'editor' ) or multiple tinymce editors on a page. But other hooks would work, but we have to make sure tinymce is defined. But we would ship our plugin by enqueue it from a .js file, in the usual way. @JanBeck – birgire Aug 27 '15 at 9:01
  • Thanks for the clarification about your intention to enqueue it as a .js file. I'm still wondering though, why you even care about tinymce at all. Even if your post edit screen only contains a title box wouldn't you still want to be able to save via keyboard shortcut? I guess the question is whether keyboard events happening inside the tinymce are bubbling up into the "outside" post edit screen. Have you tested that? – Jan Beck Aug 27 '15 at 10:18
  • During my testing, I found out that if I skip the wpse.set_keydown_for_tinymce() part, then wpse.set_keydown_for_document() will not catch the ctrl+{p,s} keydown events from the tinymce editor. So that's why I bothered with the tinymce in the first place ;-) If that could be skipped, that would be great @JanBeck – birgire Aug 27 '15 at 10:45
0

The question is old, but there is a plugin for this purpose: https://wordpress.org/plugins/save-with-keyboard/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.