ueditor文本编辑器,选择多行更改样式只对部分生效的BUG

ueditor文本编辑器,选择多行更改样式只对部分生效的BUG修复

错误发现

最近接手一个已离职员工开发的系统,里面有文章的编辑,发布,管理等功能。用户使用过程中反馈回来,有些文章在编辑的时候选中多行但不能对多行生效,很是影响使用体验,被打回来由我接手修复这个BUG。
前同事在完成编写文章功能的时候用到了ueditor富文本编辑器,所以就着手对这个编辑器进行测试,终于复现了这个BUG,如下图
BUG情况展示

BUG修复

经过研究,判断可能是span嵌套搞的鬼。因为每句话有多个span嵌套,而更改样式只更改最外层的样式,内层的样式未经改变,仍然是原始字号,所以出现该问题。
知道问题就要开始解决问题,这里直接给出方法。将ueditor.all.js文件中11507行的代码做一点改动就可以完美解决问题,改动如下图
在这里插入图片描述
附上改动后的源码:

rng.traversal(function(node){
                var start;
                if(domUtils.isTagNode(node,'span')){
                    start = node;
                }else{
                    start = domUtils.getElementsByTagName(node,'span')[0];
                }
                if(start && domUtils.isTagNode(start,'span')){
                    var bk = rng.createBookmark();
                    utils.each(domUtils.getElementsByTagName(start, 'span'), function (
                    span) {
                        if (!span.parentNode || domUtils.isBookmarkNode(span)) return;
                        if (
                            cmdName == "backcolor" &&
                            domUtils
                            .getComputedStyle(span, "background-color")
                            .toLowerCase() === value
                            ) {
                            return;
                        }
                        domUtils.removeStyle(span, needSetChild[cmdName]);
                        if (span.style.cssText.replace(/^\s+$/, "").length == 0) {
                            domUtils.remove(span, true);
                        }
                    });
                        rng.moveToBookmark(bk);
                        }
                    });

改动后测试BUG被完美修复
在这里插入图片描述

感谢阅读,希望能帮你少踩坑

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值