Use Tab Key to Indent in WordPress HTML Editor

How often do beginners copy code from another websites? Do you differ the code with the tabs or with a lot of spaces? I think it depends on the code highlighter user use. Whatever, I don’t prefer it, When I write the code in a WordPress html editor and the pressing tab key, textarea lose its focus. Now let’s move to that positive note.

Wordpress HTML Editor

WordPress HTML Editor

There are two basic steps which permits you to include this feature into your WordPress HTML editor in wordpress admin panel.

Step 1. Add jQuery

First of all create a javascript file extension with .js and place it directly in your current theme directory.
i.e. vedansh-tabwordpress.js

jQuery(function($) {
$(‘textarea#content, textarea#wp_mce_fullscreen’).keydown(function(e){
// #content – HTML editor id attribute
// #wp_mce_fullscreen – fullscreen HTML editor id
if( e.keyCode != 9 )
return;
e.preventDefault();
var
textarea = $(this)[0],
start = textarea.selectionStart,
before = textarea.value.substring(0, start),
after = textarea.value.substring(start, textarea.value.length);
textarea.value = before + “\t” + after;
textarea.setSelectionRange(start+1,start+1);
});
});

above javascript code works with Safari, Mozilla Firefox, Opera, Google Chrome, IE9.

Step 2. Enqueueing the script

Here vedansh-tabwordpress.js is my javascript file name. this code add into your current theme functions.php

if( !function_exists(‘mr_tab_to_indent_in_textarea’) ){
function vipl_tab_in_textarea() {
wp_enqueue_script(‘tab-to-indent’, get_stylesheet_directory_uri() . ‘/vedansh-tabwordpress.js‘, array(‘jquery’), null, true);
}

add_action(‘admin_print_scripts-post-new.php’, ‘vipl_tab_in_textarea’);
add_action(‘admin_print_scripts-post.php’, ‘vipl_tab_in_textarea’);
}

Leave a Reply

Your email address will not be published. Required fields are marked *