处理contentEditable DIV上的换行符

Question

我contenteditable在SAFARI/CHROME上有换行问题.当我在contentEditable上按"return" <div>,而不是创建一个<br>(像Firefox),他们创建一个新的<div>:

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

看起来像(在contentEditable DIV上):

Something
Something

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

SomethingSomething

在Firefox中,contenteditable是:

Something
<br>
Something

卫生处理后看起来一样:

Something
Something

是否有任何解决方案可以跨浏览器"规范化"这个？

我已经在Make a <br>而不是<div> </ div>上找到了这个代码,只需在一个contenteditable上按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中)我必须按两次"返回"键才能获得新的一行...

任何的想法？

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

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

编辑3:好吧,我改变了document.createChild("br");对document.createElement("br");,我想我得到了它在FF/Safari /铬工作......所有的收益<br>用于新的生产线......

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

编辑4:如果有人对上一次编辑的解决方案感兴趣:如果它位于<LI>元素内,则避免使用createElement函数(contentEditable)

Answer 1

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

它不是一个完美的黑客,但它的工作原理:它在你的BR之后添加了一个空格,以便正确显示.但是,您将看到只添加空格""不会改变任何内容,它可以与其他字母一起使用.浏览器不会显示它,可能是因为它就像是一个html页面内的空白区域,它根本没有任何意义.为了摆脱那个bug我用jQuery创建了一个包含 标签的div ,我把text()属性放在textnode中,否则它不起作用.

$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;
  }

   }
});

Answer 2

听击键似乎很多工作.这样简单的事情是否可行:

var html = $('.content').html().replace(/<div>/gi,'<br>').replace(/<\/div>/gi,'');

JSFiddle演示在这里.

此外,看起来sanitize.js允许自定义配置.您是否尝试添加div为允许元素？

允许HTML/CSS是危险的,因此请确保您格外谨慎.

编辑:删除了服务器端注释.消毒发生在使用时 - 如果客户想要在本地绕过它,则可以自行承担风险.谢谢Vincent McNabb指出这一点.

Answer 3

您只需使用以下命令即可 document.execCommand('insertHTML',false,'<br>');

此命令将阻止默认行为并添加您希望的标记.这就是一行代码

甚至更容易的方法.

只有CSS.

对于你的contenteditable元素应用display:inline-block规则,这将只添加br