Use Tab to Indent in WordPress HTML Editor. I think it might also depend on the code highlighter you’re using. Anyway, I don’t like it when I’m writing code in a post, and if I press the “tab” button, the text area loses focus.
There are two straightforward steps that let you add this feature to your WordPress HTML editor in the admin panel.
Step 1. jQuery
First, let’s make a JavaScript file and put it, for instance, right in your current theme folder.
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 doesn’t weigh much. It only changes how the “tab” button works in specific text areas. I’ve tested it, and it works in Google Chrome, Safari, Mozilla Firefox, Opera, and IE9.
Step 2. Enqueueing the script
In this step, we need to add our JavaScript file to WordPress admin pages. The file I’m using is named “admin.tabintextarea.”
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');My JavaScript code is simple and doesn’t weigh much. It only changes how the “tab” button works in specific text areas. I’ve tested it, and it works in Google Chrome, Safari, Mozilla Firefox, Opera, and IE9.
…or you can save time and add this code to the functions.php instead.
You can save yourself some steps and directly use the following code. Just insert it into your theme’s functions.php file:
if( !function_exists('diwakar_tab_to_indent_in_textarea') ){ function diwakar_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', 'diwakar_tab_to_indent_in_textarea'); add_action('admin_footer-post.php', 'diwakar_tab_to_indent_in_textarea');}Related Articles
Leave a Reply