Use <Tab> to Indent in WordPress HTML Editor

How often do you copy code snippets from another websites? What do you like the most – code with the tabs or with a lot of spaces? Do you see the difference? I think it also depends on the code highlighter you use. Anyway, I don’t like it, when I write the code in a […]

December 23, 2013 / #wp-admin

How often do you copy code snippets from another websites? What do you like the most – code with the tabs or with a lot of spaces? Do you see the difference?

I think it also depends on the code highlighter you use. Anyway, I don’t like it, when I write the code in a post and after the pressing tab button, textarea lose its focus.

tab indent in WordPress HTML editor

There are two simple steps which allows you to add this feature into your WordPress HTML editor in admin panel.

Step 1. jQuery

First of all let’s create a javascript file and place it for example directly into your current theme directory.

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

My javascript code is simple and lightweight, it only revise the tab button action in given textareas. Works (tested) on Google Chrome, Safari, Mozilla Firefox, Opera, IE9.

Step 2. Enqueueing the script

In this step we should include our javascript file to WordPress admin pages. «admin.tabintextarea» is the name of my file.

function mr_tab_to_indent_in_textarea() {
	wp_enqueue_script('tab-to-indent', get_stylesheet_directory_uri() . '/admin.tabintextarea.js', array('jquery'), null, true);
}
 
add_action('admin_print_scripts-post-new.php', 'mr_tab_to_indent_in_textarea');
add_action('admin_print_scripts-post.php', 'mr_tab_to_indent_in_textarea');

Look at the admin_print_scripts-post-new.php and admin_print_scripts-post.php action hooks. These hooks allows you to enqueue the javascript file only on «add post» and «edit post» pages.

That’s all.

…or skip the steps and add the following code to the functions.php

You can also skip the previous steps and use the code below. Just add it to your current theme functions.php file:

if( !function_exists('mr_tab_to_indent_in_textarea') ){
	function mr_tab_to_indent_in_textarea() {
		$tabindent = '<script>
		jQuery(function($) {
			$("textarea#content, textarea#wp_mce_fullscreen").keydown(function(e){  
				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);  
			});
		});</script>';
		echo $tabindent;
	}
 
	add_action('admin_footer-post-new.php', 'mr_tab_to_indent_in_textarea');
	add_action('admin_footer-post.php', 'mr_tab_to_indent_in_textarea');
}

Only the best of WordPress

once a week, no spam

Leave your question or feedback

phpjsHTMLCSSSQLCode
Please, enter a comment
Please, enter a name
Incorrect email