Tab behavior in summernote or any RTE

Question

I am using summernote rich text editor and below is my requirement

The editor is part of a long form which has a bunch of fields

• When inside the editor, if I press TAB key, instead of indent I want to go to the next field (the usual TAB behavior)
• When inside the editor, if I press CTRL+TAB key, I want to add the indent.

Even if its custom functionality do suggest

Answer 1

You can combine aspects the following answers:

• Insert text at caret in contenteditable
• Allow typing of tab characters in textareas and text inputs

Here's an example. It uses Shift - Tab rather than Ctrl - Tab because it seems the browser prevents overriding of the default Ctrl - Tab beahviour (at least in Chrome on a Mac). It should work in all major browsers, including old IE back to version 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

Actuaally it was rather simple. I just disabled the code for tab and shift+tab keys in summernote.js :)