post editor with TAB support and ctrl+s to update post  [ 936 views ]

Goal: to use the TAB key in the post editor

1. The following code catching the TAB key and replace it with 2 spaces.
The second effect is to replace all the TAB occurences (hold the SHIFT key while press a TAB down).

2. You can update your post with alt+p (this is the default), but there is a key combination in my hand ctrl+s to save. I’ve implemented this as well. This is the third part of this code.

My wp_editor_extend.js file is:

/*
  wp editor extender by SilverTerra 
  1.0.0 - 06.06.2014 - initial version
  1.0.1 - 14.06.2014 - ctrl+s hot key combination for update added
*/

(function($){

  $(document).ready(function(){
  
    // 1. catch tab and replace it to 2 spaces
    // 2. shift+tab - replace all tabs to 2 spaces
    $.fn.tabCorrector = function () {
      this.keydown(function (e) {      
        if (e.keyCode === 9) {
        var val = this.value,
            start = this.selectionStart,
            end = this.selectionEnd;          
          if(e.shiftKey){
            this.value = val.replace(/\t/g, '  ');
          }
          else{
            this.value = val.substring(0, start) + '  ' + val.substring(end);
            this.selectionStart = this.selectionEnd = start + 2;          
          }
          return false;
        }
        return true;
      });
      return this;
    };

    $('.wp-editor-area').tabCorrector();
    
    // ctrl+s for update
    $('.wp-editor-area').keydown(function (e) {      
      if (e.keyCode === 83 && e.ctrlKey) {
        $('#publish').click();
        return false;
      }
      return true;
    });

  });

})(jQuery);

To call my script from the wp-admin just edit the wp-admin\includes\misc.php file.
Put this to the end of the file.

function plugin_admin_head_js() {
print "<script type='text/javascript' src='" . get_bloginfo('template_directory') . "/js/wp_editor_extend.js'></script>";
}
add_action('admin_head', 'plugin_admin_head_js');
#sidebar a { color:#fff; } #sidebar ul ul li { color: #DEF585; } #sidebar h2 { color: #fff; } #sidebar ul p, #sidebar ul select { color: #BEDDBE; } #backfly { background: url(images/golfBallWallPaper.jpg) left bottom fixed repeat-x #65a51d; }