Question

我有一个div属性contentEditable set。

这使我可以拥有一个自由格式的可编辑文本区域，而无需任何表单输入字段：http://jsfiddle.net/M8wx9/8/

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

我可以使用.html()代替.text()将HTML直接存储到数据库中，但我不喜欢这个想法，因为我可能需要将此数据提取为未来的纯文本。此外，在Firefox中按Enter键会打破<br>的新行，Chrome和Safari正在打破<div>...</div>，而Internet Explorer和Opera正在使用段落<p>...</p>来换行，因此它不会发出声音很容易解析html。

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

最诚挚的问候，的 NS

Answer 1

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

来自你的jsfiddle：

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

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

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

$(Comments).html().trim() .replace(/<br(\s*)\/*>/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/

正如评论中所提到的，之前的功能并不适用于Chrome。这是一个有效的解决方案：

$(Comments).html().trim()
.replace(/<br\s*\/*>/ig, '\n') 
.replace(/(<(p|div))/ig, '\n$1') 
.replace(/(<([^>]+)>)/ig, "");

http://jsfiddle.net/M8wx9/81/

Answer 2

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

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

Answer 3

这听起来太简单了，所以我在给出这个答案时犹豫不决，但是从我跑的快速测试中，以下内容应该完全正常（至少在chrome中）：

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

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

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

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

3 个答案: