contentEditable字段，用于在数据库输入时维护换行符

我有一个div属性contentEditable设置。

这允许我有一个自由格式的可编辑textarea，而不需要任何表单输入字段： http ： //jsfiddle.net/M8wx9/8/

但是，当我创建几个新行并单击“保存”按钮时，我使用.text()方法获取内容，该方法继续删除我刚刚输入的换行符。 如果可能的话，我需要维护换行符，并将内容作为纯文本存储在数据库中。

我可以使用.html()而不是.text()将HTML直接存储到数据库中，但我不喜欢这个想法，因为我可能需要将此数据提取为未来的纯文本。 此外，在Firefox中按Enter键会打破新的行，Chrome和Safari正在打破

...

，Internet Explorer和Opera正在使用段落

...

线条，所以听起来很难解析html。

如何保留这些换行符并将内容作为纯文本存储在数据库中（类似于textarea的方式）？

最诚挚的问候， ns

Answer 1

jQuery使用Node上的textContent来返回元素的文本值，这将压缩空白区域。 如果你想要维护换行符，你需要使用innerText ，这意味着直接访问元素而不是通过jQuery。

从你的jsfiddle：

 console.log($(Comments)[0].innerText); 

http://jsfiddle.net/M8wx9/10/

====更新：
作为对此的一个警告（正如Tim Down指出的那样），使用innerText只能在webkit和microsoft浏览器中使用。 如果您的应用程序也支持Firefox，则需要在innerHTML上使用正则表达式以保持换行符。 举个例子：

 $(Comments).html().trim() .replace(//ig, '\n') // replace single line-breaks .replace(/<[p|div]\s/ig, '\n$0') // add a line break before all div and p tags .replace(/(<([^>]+)>)/ig, ""); // remove any remaining tags 

http://jsfiddle.net/M8wx9/12/

Answer 2

 function readContentWithBreaks(elem){ if(elem[0].innerText){ return elem[0].innerText.replace(/\n/ig,"
"); }else{ return elem.html(); } } 

由于webkit浏览器支持innerText，我决定检测它们添加的/ n。 对于Firefox，它已经为内容提供了
所以我们可以按原样使用它。

Answer 3

这听起来太简单了，所以我对这个答案犹豫不决，但是从我跑的快速测试来看，以下应该可以完美地工作（至少在chrome中）：

 $(".post-text").text().replace(/\n/g,"
") 

您必须从单独的p或div标记开始，因此文本节点后跟段落元素将不会生成换行符。

并且有一个jsfiddle嘲笑这个。 尽管如此，正如您已经提到的，contentEditable并不是非常跨浏览器的一致性……因此，真正使用现有编辑器可能是个好主意。