contenteditable换行踩坑心得

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

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

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

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

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

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

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

        

        上网搜索了一圈，并没有发现解决方案。只好自己写个小demo，然后输出html，查看了下contenteditable的换行处理机制。网上说有加p的，有加div的。我测试出来，输入换行符，在字符串后添加了<div><br></div>。在继续输入字符，会替换中间的<br>为输入字符。同时，每行的字符串会加上双引号（好吧萌新不会传图，大家可以自己玩玩看，或者碰到就知道了）

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