jquery - Summernote 或任何 RTE 中的选项卡行为

Question

我正在使用 Summernote 富文本编辑器，以下是我的要求

编辑器是一个长表单的一部分，它有一堆字段

• 在编辑器中，如果我按 TAB 键，而不是缩进，我想转到下一个字段（通常的 TAB 行为）
• 在编辑器中，如果我按 CTRL+TAB 键，我想添加缩进。

即使它的自定义功能确实建议

Answer 1

您可以结合以下方面的答案：

• 在 contenteditable 的插入符号处插入文本
• 允许在文本区域和文本输入中键入制表符

这是一个例子。它使用Shift-Tab而不是Ctrl-Tab因为浏览器似乎阻止覆盖默认 行为Ctrl-Tab行为（至少在 Mac 上的 Chrome 中）。它应该适用于所有主流浏览器，包括旧版 IE 回到版本 6。

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 中禁用了 tab 和 shift+tab 键的代码 :)