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的。我测试出来，输入换行符，在字符串后添加了<p><br></p>。在继续输入字符，会替换中间的<br>为输入字符。同时，每行的字符串会加上双引号（好吧萌新不会传图，大家可以自己玩玩看，或者碰到就知道了）
尝试了一套办法，没卵用。只能自己想办法了。不就是字符串输出么，循环遍历了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; 加上这个就行了