contenteditable换行踩坑心得

最新推荐文章于 2025-06-03 17:22:22 发布

zjjlcq

最新推荐文章于 2025-06-03 17:22:22 发布

阅读量1.9w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： H5 文章标签： contenteditable

本文链接：https://blog.youkuaiyun.com/zjjlcq/article/details/79909058

H5 专栏收录该内容

2 篇文章

订阅专栏

在使用contenteditable属性创建后台编辑器时遇到字数统计错误、换行自动添加BR和删除字符遗留双引号等问题。通过研究contenteditable的换行机制，发现换行会添加 Unicode=10 的符号。在Vue环境下，通过监听回车和退格键，解决了字符统计和BR问题，但DOM中仍会留下双引号。这是一个对contenteditable坑点的初步解决办法，期待更智能的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做后台编辑器，可伸缩下性的输入框，在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按钮一切正常，不知道为啥），嗯于是写出以下代码：

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="";
       
        }