jquery - 处理 contentEditable DIV 上的换行符

Question

我对contenteditable有疑问SAFARI/CHROME 上的换行符。当我在 contentEditable <div> 上按“返回”时，而不是创建 <br> (如 Firefox)，他们创建一个新的 <div> :

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

看起来像(在 contentEditable DIV 上):

Something
Something

但是在清理之后(删除 <div> )，我得到了这个:

SomethingSomething

在 Firefox 中，contenteditable是:

Something
<br>
Something

sanitizer 后看起来是一样的:

Something
Something

有什么解决方案可以跨浏览器“标准化”这一点吗？

我在 Make a <br> instead of <div></div> by pressing Enter on a contenteditable 上找到了此代码

$(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 中)我必须按两次“返回”键才能换行...

有什么想法吗？

编辑:使用我发现的代码(在这个问题的底部)工作正常，除了“确保 <br> 元素始终是最后一个子元素......的任何想法”如何解决这个问题？

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

编辑 3: 好的，我更改了 document.createChild("br");至document.createElement("br");我想我可以在 FF/Safari/Chrome 中正常工作...全部返回 <br>对于新行...

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

编辑4:如果有人对上次编辑的解决方案感兴趣:Avoid createElement function if it's inside a <LI> element (contentEditable)

Answer 1

此技术似乎可以避免首次显示 BR 的 Chrome 错误(使用您提到的代码，您需要按两次 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;
  }

   }
});