javascript - 换行符的 .replace() 不适用于 contenteditable 项目

Question

我有这个简单的代码：

 <div style="margin-left:10px;">
    <p>
     <a class="btn" href="#" onclick="myFunction()"><i class="icon-link"></i></a>
    </p>
  </div>

  <div style="margin-left:10px;">

    <div id="example-one" >
      <p id="textEditor" contenteditable="true"></p>
    </div> 

  </div>



 <script type="text/javascript">



function myFunction()
{

  // removes <div> from #textEdtor's content
  $("#textEditor>div").replaceWith(function() { return $(this).contents(); }); 

  var str=document.getElementById("textEditor").innerHTML; 

  var n=str.replace(/\n|\r/g, '<br>')

  document.getElementById("textEditor").innerHTML=n;

  alert(n);
}

</script>

问题是var n=str.replace(/\n|\r/g, '<br>')当用户按下回车键时不起作用。虽然如果我使用它效果很好.replace(/\[b\]/g,'<b>').replace(/\[\/b\]/g,'</b>')

<br>只有当您按两次回车时，它才会添加一个。

有没有办法解决这个问题？

谢谢你。

Answer 1

问题在于删除子<div>元素。用下面的代码替换你的代码，一切都应该正常：

function myFunction() {
    $("#textEditor > div").before("<br />").contents().unwrap();
}

演示：http: //jsfiddle.net/Hm7DY/