カスタムWYSIWYGエディタで 'TAB'機能を追加するにはどうすればよいですか？

Question

タブでは、スペースがたくさんあるので、エディタに書き込むときに、キーボードのタブボタンを押して、要素を切り替えるのではなくスペースを取得したいと考えています。

Answer 1

タブ文字用にこれを行うプラグインがあります。ここにはかなり包括的なoneがあります。あなたがあなたのスクリプトに挿入できるコードをほしいと思ったら、私は簡単なことを書いています。それを使用するに

var shift = false; 
function codebox(element) { 

    element.addEventListener("keyup", function(event) { 
     if (event.keyCode == 16) 
      shift = false; 
    }); 

    element.addEventListener("keydown", function(event) { 
     if (event.keyCode == 16) { 
      shift = true; 
      return; 
     } 

     if (event.keyCode == 9) { 
      var start = this.selectionStart; 
      var end = this.selectionEnd; 
      var lead = this.value.substr(0, start); 
      var chunk = this.value.substr(start, end - start); 

      if (!shift) { 
       if (start == end) 
        lead = lead + "\t"; 
       else { 
        lead = ("\n" + lead).split("").reverse().join("").replace(/\n/, "\t\n").split("").reverse().join("").substr(1); 
        chunk = chunk.replace(/\n/g, "\n\t"); 
        if (chunk.substr(-2) == "\n\t") 
         chunk = chunk.substr(0, chunk.length - 1); 
       } 
      } else { 
       if (chunk.split("")[0] == "\t") { 
        lead = lead + "\t"; 
        chunk = chunk.substr(1); 
       } 
       lead = ("\n" + lead).split("").reverse().join("").replace(/\t\n/, "\n").split("").reverse().join("").substr(1); 
       chunk = chunk.replace(/\n\t/g, "\n"); 
      } 

      this.value = lead + chunk + this.value.substr(end); 
      this.selectionStart = lead.length; 
      this.selectionEnd = lead.length + chunk.length; 
      event.preventDefault(); 
     } 
    }); 
} 

は、単純に次の操作を行います。あなたは、スペースをしたいので

new codebox(myTextAreaElement); 

は、スペースとタブの間で変換する手順でイベントハンドラを包みます。