editable string 转_「contenteditable」contenteditable换行踩坑心得 - seo实验室

contenteditable

做后台编辑器，可伸缩下性的输入框，在H5出了contenteditable之后，基本取代了使用textarea自适应高度的方式。

然而，这个属性，除去兼容性不说，还是存在一些比较坑爹的小bug的。搜了不少文章，比如张鑫旭大神的纯文本方式输出p内容，链接狂戳以下，帮助还是很大的：

http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/

但是在真正使用的时候，发现了一个很大很大的坑。一般的编辑器，都需要事实字数统计功能。在测试纯文本contenteditable时发现了如下问题：

1 换行时，字数+2，再次输入一个字符，字数不变，然后再逐渐+1。(字数统计方式当然是获取html然后计算length)。

2 最后一行删除时，会自动加出一个br。

3 删除字符后，在dom里会留下一堆双引号。

上网搜索了一圈，并没有发现解决方案。只好自己写个小demo，然后输出html，查看了下contenteditable的换行处理机制。网上说有加p的，有加p的。我测试出来，输入换行符，在字符串后添加了

为输入字符。同时，每行的字符串会加上双引号(好吧萌新不会传图，大家可以自己玩玩看，或者碰到就知道了)

尝试了一套办法，没卵用。只能自己想办法了。不就是字符串输出么，循环遍历了unicode码，发现换行时纯文本会自动添加两个Unicode = 10的符号，一开始以为是双引号，结果输出下双引号Unicode，并不是。算了就当成是机制占位符吧。好的于是有办法了。主要是在输入回车与backspace时会出现字符统计问题(delete按钮一切正常，不知道为啥)，嗯于是写出以下代码：

handleKeyup(e){

const el = e.target;

let value = el.innertext

//由于contenteditable属性产生的换行机制问题

//纯文本模式下，会加Unicode等于10的2位字符，同时由于删减时有时会自动补充

//所以产生如下判断

if(e.keyCode == '13')

value = value.substring(0,value.length-1);

if(e.keyCode == '8'){

if(value.length>=2){

if(value.charCodeAt(value.length-1)==10&&value.charCodeAt(value.length-2)==10){

value = value.substring(0,value.length-1);

}

else if(value.charCodeAt(value.length-1)==10 && value.charCodeAt(value.length-2)!=10){

value = value.substring(0,value.length-1);

}

}

}

//以防万一

if(value.charCodeAt(0) == 10 && value.length ==1)

value="";

}

环境是vue下的，但是其他的处理字符串的方法也差不多，之后字符输入就没有问题了，同时因为输出的innerText，所以br问题也没有了，唯一的缺陷是dom里删除字符后会留下一堆双引号，但传给后台貌似也看不到。

不管怎么说，初步算解决这个问题了。具体还得调研下contenteditable的机制才好做更加靠谱的处理。也希望这个好用的属性在字符处理的时候能更加智能一些。也抛砖引玉看有木有大神能更好的解决这个问题。欢迎一起讨论

相关阅读

\n是换行符，这并不是java中的规定，而是更广泛的计算机领域中均为此含义。 1、提到\n就不能不提\r(回车)，下面，详细讲解一下： 在计算机

http://jingyan.baidu.com/article/0aa223755fcfd288cc0d6429.html

首先设置可多行this.TextBox1.Multiline=true; 换行this.TextBox1.Text="加入此换行符即可换行" + "\r\n";

今天在做scroll-view滑动时遇到了这个不换行的坑。要实现的效果是这样子的。我的一条数据以一块状的型式展示的。我要做向左滑动

xmp能原样输出html标签，但是他默认是单行的 怎么换行呢

white-space:normal;

加上这个就行了