CONTENTEDITABLE场保持在数据库条目换行符(contentEditable field

2019-08-03 16:20发布

我有一个属性集CONTENTEDITABLE一个div。

这让我有一个自由格式编辑文本区域,而不需要任何形式的输入字段: http://jsfiddle.net/M8wx9/8/

然而,当我创建两个新的生产线,并单击保存按钮,我抓住与内容.text()它接着去除换行符我刚刚进入的方法。 我需要保持如果在所有可能的换行符和存储内容在数据库中的纯文本。

我可以通过使用直接存储HTML到数据库.html()代替.text()但我不喜欢这个主意,因为我可能需要将这些数据作为未来纯文本。 此外,按在Firefox中输入新的突破线, <br> ,Chrome和Safari与突破<div>...</div>和Internet Explorer和Opera使用段落<p>...</p>新行,所以它不会听起来很容易就能解析HTML。

我如何保存这些换行符和存储内容在数据库中(到一个文本的方式做类似)纯文本?

最好的问候,NS

Answer 1:

jQuery使用textContent上的Node返回一个元件,这将压缩空白的文本值。 如果你想换行维持,您需要使用innerText这意味着通过jQuery的访问元素,而不是直接。

从你的jsfiddle:

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

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

====更新:
作为一个警告这个(蒂姆下所指出的),使用innerText将只在WebKit和微软浏览器。 如果您的应用程序还支持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 shoing这一点。 不过,因为你已经提到CONTENTEDITABLE不是非常跨浏览器一致的......所以它可能是真正使用现有的编辑器是个好主意。



文章来源: contentEditable field to maintain newlines upon database entry