从textarea中将/n更改为

On dblclick - DIV is replaced with TEXTAREA. You can edit text.

在dblclick - DIV被替换为TEXTAREA。您可以编辑文本。

On blur - TEXTAREA is replaced back with DIV. And new line are replaced with " ".

在模糊- TEXTAREA被替换为DIV，新的行被替换为“
”。

First problem - is in edited text - " " is not like breaked or new line in text, but just like text " ". How to fix it ?

第一个问题——在编辑过的文本中——“
”不像文本中的断行或新行，而像文本“
”。如何修复它?

Second problem - there is one " " in example. When you edit text in example for the first time, this " " is not changed to new line, but only to simple space (&nsbp;). Why there is this error, when you try edit text original for the first time ?

第二个问题——例如有一个“
”。当您第一次在示例中编辑文本时，这个“
”不会更改为新行，而是只更改为简单空间(&nsbp;)。为什么会有这个错误，当你第一次尝试编辑文本的时候?

jsFiddle DEMO

jsFiddle演示

HTML

<div id="meText">Click to edit <br /> this text.</div>

jQuery

$(function(){
    $("#meText").live('click',function(){
        var originalDiv = this;
        $(this).replaceWith($("<textarea></textarea>").text($(this).text().replace(/<br\s?\/?>/g,"\n")).width($(this).width()).height($(this).height()).blur(function(){$(this).replaceWith($(originalDiv).text($(this).val().replace(/\r\n|\r|\n/g,"<br />")));}));
    });
});

2 个解决方案

#1

Try with .html() instead of .text() and change the replace like

尝试使用.html()而不是.text()，并更改类似的替换

$(function(){
$("#meText").on('click',function(){
    var originalDiv = this;
    $(this).replaceWith($("<textarea></textarea>").html($(this).text().replace(/\n/g, "<br />")));
  });
});

See this LINK.You can add your width and height to this

看到这个链接。你可以增加你的宽度和高度。

#2

please use below code

请使用下面的代码

  $(this).replaceWith($("<textarea></textarea>").text($(this).html().replace(/<br\s?\/?>/g,"\n")).width($(this).width()).height($(this).height()).blur(function(){$(this).replaceWith($(originalDiv).html($(this).val().replace(/\r\n|\r|\n/g,"<br />")));}));

you are using some place text() instead of html(). if we use text() it eliminate html tag

您正在使用某个place text()而不是html()。如果我们使用text()，它会消除html标签。

#1