创建用于HTML模式的键盘快捷键

时间:2012-12-01 作者:Yasser Shaikh

我总是用HTML编辑器来写我所有的帖子。

所以我总是手动键入所有标记,例如“<strong></strong>“对于粗体…”<i></i>" 对于斜体等。

我不想使用可视化模式,因为我使用了很多插件,我必须键入短代码,还有很多其他个人原因,我只想使用HTML模式。

我想知道我是否可以为所有操作(在HTML编辑器中)创建快捷方式,否则这些操作会出现在视觉模式中。

1 个回复
SO网友:Ralf912

要做到这一点,需要一些javascript。你需要一个倾听者和一些行动。我们开始吧。。。

首先,将javascript排队到post和post新屏幕:

PHP:

add_action( \'plugins_loaded\', \'keyboradshortcuts4htmleditor\', 10, 0 );

function keyboradshortcuts4htmleditor(){

    add_action( \'admin_print_scripts-post-new.php\', \'keyboradshortcuts4htmleditor_enqueue_javascript\', 10, 0 );
    add_action( \'admin_print_scripts-post.php\', \'keyboradshortcuts4htmleditor_enqueue_javascript\', 10, 0 );

}

function keyboradshortcuts4htmleditor_enqueue_javascript(){

    wp_enqueue_script(
        \'keyboradshortcuts4htmleditor\',
        plugins_url( \'keyboradshortcuts4htmleditor.js\', __FILE__ ),
        array( \'jquery\', \'keyboradshortcuts4htmleditor_selection\' ),
        false,
        true
    );

    wp_enqueue_script(
        \'keyboradshortcuts4htmleditor_selection\',
        plugins_url( \'selection.js\', __FILE__ ),
        array( \'jquery\' ),
        false,
        true
    );

}
第二个javascript是一个小片段,用于从textarea获取所选文本。不要再说了。

这很简单。现在是困难的部分。我们需要一个javascript来监听键盘并在特定的按键上执行一些操作。只有当按键inside 按下文本区域(编辑器)。我们使用jQuerys.keypress() 方法并将其绑定到textarea(id“#content”):jQuery( \'#content\' ).keypress( ... )现在,我们必须检查是否按下了特定的键并触发该操作。我使用一个简单的数组作为键映射(keycode->function to do),并使用eval().

在您的操作中,您必须检查文本是否被选中并进行处理。The following script is a rough draft! 你必须了解那里发生了什么,并定义我们自己的捷径。脚本必须重新编译,我不是javascript专家。

JavaScript:

/*
 * KeyBoardShortCuts4HTMLEditor
 *
 * @author: Ralf Albert
 *
 */
( function( ) {

    keymap = null;

    KeyBoardShortCuts4HTMLEditor = {

            textarea_id: \'content\',

            tags_open: [],

            init: function(){

                kbsc = this;

                kbsc.keymap = kbsc.initKeymap();

                jQuery( \'#\' + kbsc.textarea_id ).keypress(

                    function( event ){

                          var key = event.which;

                        // debugging & Development
                        //console.log( \'Keypress: \' + key );

                        if( \'undefined\' !== kbsc.keymap[key] ){
                            callFunction = kbsc.keymap[key];
                        }

                        try{

                            eval( \'kbsc.\' + callFunction + \'();\' );

                        } catch (e) {} finally {};

                    }

                );


            },

            initKeymap: function(){

                var keymap = [];

                keymap[63] = \'help\';
                keymap[66]  = \'bold\';
                keymap[73]  = \'italic\';

                return keymap;

            },

            insertAtCaret: function( text ){

                Selector.insertAtCaret( kbsc.textarea_id, text );

                return;

            },

            openCloseTags: function( selected, tag ){

                if( undefined === selected.lenght ) {

                    if( undefined === kbsc.tags_open[tag.id] || null === kbsc.tags_open[tag.id] ){

                        kbsc.tags_open[tag.id] = true;
                        kbsc.insertAtCaret( tag.open );

                    } else {

                        kbsc.tags_open[tag.id] = null;
                        kbsc.insertAtCaret( tag.close );

                    }


                    return true;
                }

                return false;

            },

            help: function(){

                var helpstr = \'\';

                for( var i in kbsc.keymap ){
                    var key = String.fromCharCode(i);
                    helpstr = helpstr + key + \': \' + kbsc.keymap[i] + \'\\n\';
                }

                alert( helpstr );

                return;

            },

            bold: function (){

                var tag = {
                        id: \'bold\',
                        open: \'<b>\',
                        close: \'</b>\'
                    };

                var selected = Selector.getSelection( kbsc.textarea_id );

                if( undefined === selected.length || 0 === selected.length ) {

                    kbsc.openCloseTags(
                            selected,
                            tag
                    );

                } else {

                    Selector.replaceSelection( kbsc.textarea_id, tag.open + selected.text + tag.close );
                }

            },

            italic: function(){

                var tag = {
                        id: \'italic\',
                        open: \'<i>\',
                        close: \'</i>\'
                    };

                var selected = Selector.getSelection( kbsc.textarea_id );


                if( undefined === selected.length || 0 === selected.length ) {

                    kbsc.openCloseTags(
                            selected,
                            tag
                    );

                } else {

                    Selector.replaceSelection( kbsc.textarea_id, tag.open + selected.text + tag.close );
                }

            }


    };

    KeyBoardShortCuts4HTMLEditor.init();

} )( jQuery );
您可以找到完整的文件in this gist.

结束

相关推荐