处理 contentEditable DIV 上的换行符

我有一个问题contenteditableSAFARI/CHROME 上的换行符。当我在 contentEditable 上按“返回”时<div>，而不是创建一个<br>（如 Firefox），他们创建了一个新的<div>:

<div>Something</div>
<div>Something</div>

看起来像（在 contentEditable DIV 上）：

Something
Something

但消毒后（去除<div>），我得到这个：

SomethingSomething

在火狐浏览器中，contenteditable is:

Something
<br>
Something

消毒后看起来是一样的：

Something
Something

有没有任何解决方案可以跨浏览器“标准化”这一点？

我在上面找到了这段代码通过在可编辑内容上按 Enter 键来制作 而不是

$(function(){

  $("#editable")

  // make sure br is always the lastChild of contenteditable
  .live("keyup mouseup", function(){
    if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
      this.appendChild(document.createChild("br"));
     }
  })

  // use br instead of div div
  .live("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);
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);
        return false;
      }
    }
  });
});

这可行，但是（在 SAFARI 和 Chrome 中）我必须按两次“返回”键才能换行......

任何想法？

Edit：使用我发现的代码（在这个问题的底部）工作正常，除了“确保<br>元素始终是最后一个子元素...知道如何解决这个问题吗？

Edit 2:我在控制台上收到此错误：Uncaught TypeError: Object #<HTMLDocument> has no method 'createChild'

Edit 3:好的，我改变了document.createChild("br"); to document.createElement("br");我想我可以在 FF/Safari/Chrome 中正常工作...全部返回<br>对于新线路...

现在的问题是，当我在有序列表或无序列表中时，我需要获得一个新行而不需要<br>...

Edit 4:如果有人对上次编辑的解决方案感兴趣：如果 createElement 函数位于 元素内，请避免使用该函数 (contentEditable)

这种技术似乎可以避免 Chrome 第一次显示 BR 的错误（使用您提到的代码，您需要按两次 Enter 键）。

这不是一个完美的破解，但它有效：它在 BR 之后添加一个空格，以便它正确显示。 但是，您会发现仅添加空格“”不会改变任何内容，它适用于其他字母。浏览器不会显示它，可能是因为它就像 html 页面中的空白，它根本没有任何意义。为了摆脱这个错误，我用 jQuery 创建了一个 div，其中包含 标签，我采取text()属性将其放入文本节点，否则它将不起作用。

$editables = $('[contenteditable=true]');

$editables.filter("p,span").on('keypress',function(e){
 if(e.keyCode==13){ //enter && shift

  e.preventDefault(); //Prevent default browser behavior
  if (window.getSelection) {
      var selection = window.getSelection(),
          range = selection.getRangeAt(0),
          br = document.createElement("br"),
          textNode = document.createTextNode("\u00a0"); //Passing " " directly will not end up being shown correctly
      range.deleteContents();//required or not?
      range.insertNode(br);
      range.collapse(false);
      range.insertNode(textNode);
      range.selectNodeContents(textNode);

      selection.removeAllRanges();
      selection.addRange(range);
      return false;
  }

   }
});