错误发现
最近接手一个已离职员工开发的系统,里面有文章的编辑,发布,管理等功能。用户使用过程中反馈回来,有些文章在编辑的时候选中多行但不能对多行生效,很是影响使用体验,被打回来由我接手修复这个BUG。
前同事在完成编写文章功能的时候用到了ueditor富文本编辑器,所以就着手对这个编辑器进行测试,终于复现了这个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被完美修复
感谢阅读,希望能帮你少踩坑