在contentEditable元素上按Enter键时,跨浏览器方式插入BR或P标记

Question

当您按contentEditable元素上的Enter键时,每个浏览器都会以不同方式处理生成的代码:Firefox会插入BR标记,Chrome会在Internet Explorer插入P标记时插入DIV标记.

我拼命寻找解决方案,至少为所有浏览器使用BR或P,最常见的答案是:

插入BR标签:

$("#editableElement").on("keypress", function(e){
      if (e.which == 13) {
        if (window.getSelection) {
          var selection = window.getSelection(),
              range = selection.getRangeAt(0),
              br = document.createElement("br");
          range.deleteContents();
          range.insertNode(br);
          range.setStartAfter(br);
          range.setEndAfter(br);
          selection.removeAllRanges();
          selection.addRange(range);
          return false;
        }
      }
    });

但是这不起作用,因为似乎浏览器不知道如何设置插入符号,<br>这意味着以下操作没有做任何有用的事情(特别是如果在插入符号放在文本末尾时按Enter键):

range.setStartAfter(br);
range.setEndAfter(br);

有些人会说:使用double <br><br>但是当你在文本节点中按Enter键时会产生两个换行符.

其他人会说总是<br>在contentEditable的末尾添加一个额外的,但是如果你有一个<div contenteditable><p>text here</p></div>并且你把光标放在文本的末尾然后点击回车,你将得到错误的行为.

所以我对自己说,也许我们可以使用P而不是BR,常见的答案是:

插入P标签:

document.execCommand('formatBlock', false, 'p');

但这也不能始终如一地发挥作用.

如您所见,所有这些解决方案都有待改进.还有其他解决方案可以解决这个问题吗？

Answer 1

一种可能的解决方案:在元素后附加一个零宽度空格字符的文本节点<br>.这是一种非打印零宽度字符,专门用于:

...当使用不使用显式间距的脚本时,或者在未跟随可见空间但在此之后可能存在换行符的字符(例如斜杠)之后,指示文本处理系统的字边界.

(维基百科)

在Chrome 48,Firefox 43和IE11中测试过.

$("#editableElement").on("keypress", function(e) {
  //if the last character is a zero-width space, remove it
  var contentEditableHTML = $("#editableElement").html();
  var lastCharCode = contentEditableHTML.charCodeAt(contentEditableHTML.length - 1);
  if (lastCharCode == 8203) {
    $("#editableElement").html(contentEditableHTML.slice(0, -1));
  }
  // handle "Enter" keypress
  if (e.which == 13) {
    if (window.getSelection) {
      var selection = window.getSelection();
      var range = selection.getRangeAt(0);
      var br = document.createElement("br");
      var zwsp = document.createTextNode("\u200B");
      var textNodeParent = document.getSelection().anchorNode.parentNode;
      var inSpan = textNodeParent.nodeName == "SPAN";
      var span = document.createElement("span");
      
      // if the carat is inside a <span>, move it out of the <span> tag
      if (inSpan) {
        range.setStartAfter(textNodeParent);
        range.setEndAfter(textNodeParent);
      }

      // insert the <br>
      range.deleteContents();
      range.insertNode(br);
      range.setStartAfter(br);
      range.setEndAfter(br);
      
      // create a new span on the next line
      if (inSpan) {
        range.insertNode(span);
        range.setStart(span, 0);
        range.setEnd(span, 0);
      }

      // add a zero-width character
      range.insertNode(zwsp);
      range.setStartBefore(zwsp);
      range.setEndBefore(zwsp);
      
      // insert the new range
      selection.removeAllRanges();
      selection.addRange(range);
      return false;
    }
  }
});

#editableElement {
  height: 150px;
  width: 500px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable=true id="editableElement">
  <span>sample text</span>
</div>