Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I always use the HTML editor for writing all my post.

So I always have manually typed all the tags such as "<strong></strong>" for bold... "<i></i>" for italics etc.

I don't want to use the Visual Mode, as I use many plugins for which I have to type in shortcodes and many other personal reasons for using HTML mode only.

I was wondering if I can create shortcuts for all the operation (in HTML editor) which otherwise are present in the Visual Mode.

share|improve this question
    
What you actually looking for is a way to easily insert shortcodes when in html mode? –  Sagive SEO Dec 1 '12 at 12:42
    
yes... exactly I want to define my shortcuts for both shortcodes and other normal html tags, can we do that in wordpress ? –  Yasser Dec 1 '12 at 12:51
    
I don't understand the question. There are buttons for 'bold', 'italic', and a dozen or so more in the HTML editor. –  s_ha_dum Dec 1 '12 at 14:46
    
ya, there are.. what I want to setup is keyboard shortcuts for those buttons.. is this possible ? –  Yasser Dec 1 '12 at 15:08
    
For regular definitions there are keyboard shortcodes.Just like word - ctrl +b = BOLD, ctrl + u = UNDERLINE etc... for your shorcodes you need a select menu.. –  Sagive SEO Dec 1 '12 at 16:10
show 5 more comments

1 Answer 1

It needs a bit of javascript to do that. You need a listener and some actions. Here we go...

At first enqueueing the javascript to the post and post new screens:

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

}

The second javascript is a small snippet to get the selected text from the textarea. No more words about it.

That was quite simple. Now the difficult part. We need a javascript which listen to the keyboard and do some actions on a specific keypress. This should only happend when a key inside the textarea (editor) is pressed. We use jQuerys .keypress() method and bind it to the textarea (id '#content' ): jQuery( '#content' ).keypress( ... ) Now we have to check if a specific key was pressed and trigger that action. I use a simple array as keymap (keycode -> function to do) and call the function with eval().

In your actions you have to check if a text is selected or not and deal with it. The following script is a rough draft! You have to understand what happend there and define our own shortcuts. The script have to be refacotred, I am not a javascript expert.

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

You can found the complete files in this gist.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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