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>

问题是当用户按Enter键时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();
}

DEMO： http://jsfiddle.net/Hm7DY/

换行符的.replace（）不适用于可信项目

1 个答案: