用于更新页面或帖子的键盘快捷键?


Answers:


8

我对此感到很好奇,并检查了键盘快捷键上的Codex ,但未在此处提及。

我搜索后发现,这似乎已经解决了,例如在这里这里

我还没有测试过其他插件,所以不确定它们如何解决,但是我决定接受挑战,看看如何解决;-)

因此,这是我为以下应用创建快捷方式的技巧:

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

带有在挂钩中运行的以下测试插件after_wp_tiny_mce

/**
 * 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 });

我将wpse.keydown事件回调添加到了页面上的每个tinymce编辑器中,因此快捷方式也可以从那里获得。

请注意,我用的after_wp_tiny_mce钩子,为方便易测试钩上的香草安装,因为我们正在处理的TinyMCE的 JavaScript对象。当我们发布这样的插件时,应该像往常一样从.js文件中排队。

我们还可以使用SetupEditor事件TinyMCE的,提到这里的@bonger,但在这里,我已经添加了额外的检查,看是否TinyMCE的定义,以避免它不是定义网页上的JavaScript错误:

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

我们可能还可以设置本机tinymce快捷方式。

这可能需要进行一些测试和调整,但似乎可以在我的安装中使用。


ps:只想提一下,如果页面以文本模式加载,然后又切换回可视模式,则不会触发tinymce keydown事件。
birgire 2015年

将其挂接到tinymce而不是发布到编辑屏幕的背后是什么原因?
Jan Beck

好问题。由于我要处理的是tinymce javascript对象,因此我认为after_wp_tiny_mce这是一个方便的测试安装,可以方便地进行普通安装,在我不期望的地方remove_post_type_support( 'post', 'editor' )或页面上有多个tinymce编辑器。但是其他钩子也可以使用,但是我们必须确保定义了tinymce。但是,我们会以通常的方式通过将插件从.js文件中放入队列来运送我们的插件。@JanBeck
birgire

感谢您就打算将其作为.js文件加入队列的澄清。我仍然想知道,为什么您甚至根本不关心tinymce。即使您的帖子编辑屏幕仅包含标题框,您仍然不希望能够通过键盘快捷键进行保存吗?我猜的问题是,tinymce内部发生的键盘事件是否正在冒泡进入“外部”后期编辑屏幕。你测试过了吗?
Jan Beck

在测试期间,我发现如果跳过该wpse.set_keydown_for_tinymce()部分,则wpse.set_keydown_for_document()不会捕获来自tinymce编辑器的ctrl + {p,s}键按下事件。因此,这就是为什么我一开始就烦扰tinymce的原因;-)如果可以跳过,那就太好了@JanBeck
birgire

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.