jquery - summernote または任意の RTE でのタブの動作

Question

私はsummernoteのリッチテキストエディターを使用していますが、以下が私の要件です

エディターは、多数のフィールドを持つ長いフォームの一部です

• エディター内で TAB キーを押すと、インデントの代わりに次のフィールドに移動したい (通常の TAB 動作)
• エディター内で CTRL+TAB キーを押すと、インデントを追加したい。

そのカスタム機能が示唆している場合でも

Answer 1

次の回答の側面を組み合わせることができます。

• contenteditable のキャレットにテキストを挿入する
• テキストエリアとテキスト入力でタブ文字を入力できるようにする

例を次に示します。ブラウザがデフォルトの動作を上書きできないように見えるため、 ではShiftなくTab使用しますCtrl（少なくともMacのChromeでは）。バージョン 6 までの古い IE を含む、すべての主要なブラウザーで動作するはずです。TabCtrlTab

function insertTextAtCursor(text) {
  var sel, range, html;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      var textNode = document.createTextNode(text);
      range.insertNode(textNode);
      
      /* Move the caret to be immediately after the inserted text */
      range.setStartAfter(textNode);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  } else if (document.selection && document.selection.createRange) {
    document.selection.createRange().text = text;
  }
}

function allowShiftTabChar(el) {
  $(el).keydown(function(e) {
    if (e.which == 9 && e.shiftKey) {
      insertTextAtCursor("\t");
      e.preventDefault();
      e.stopPropagation();
    }
  });

  /* For old Opera, which only allows suppression of keypress events, not keydown */
  $(el).keypress(function(e) {
    if (e.which == 9 && e.shiftKey) {
      e.preventDefault();
      e.stopPropagation();
    }
  });
}

$(document).ready(function() {
  allowShiftTabChar( $("#editor")[0] );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre contenteditable="true" id="editor">
This is editable
Try press tab somewhere
</pre>

Answer 2

実際、それはかなり単純でした。summernote.js でタブとシフト + タブ キーのコードを無効にしました :)