改造百度ueditor字体为rem及相关体会

Posted 2020-10-07 潇湘待雨

　　提到富文本，可能大家都用到过百度的ueditor，作为一个重量级的插件，总结起来一句话，功能很强大，使用很费心。不知道是不是太久没有维护了，ueditor的文档可读性还真是差也可能是悟性不够吧。本文也不是使用教程，只是简单总结一下如何更改字体设置为rem。

　　一、问题

　　因为ueditor是pc端的富文本，所以一切字体大小都是以px为单位，但是我们项目需要在移动端来显示，并且移动端的项目都类似淘宝flexible那样做了高清屏幕的适配，这样原原本本的pc上的发布的内容在app上可能就张下面这个样子了：

因为高清屏下面，进行了viewport的缩放，所以固定的px就不适用了。

　　二、解决思路

　　解决方法有两个：

　　1、移动端直接放弃适配方案，不过这样还是要对图片进行一下处理，设置个width：100%否则屏幕就被撑开了。

　　2、在ueditor编辑的时候，根据与app相同的策略来使用rem来代替其固有的px，同时页面根元素设置与app使用的font-size

　　对比而言，肯定第一种比较快，但还是绕过去了问题，第二个就要阅读源码了，还是让我们一起来看一下如何进行第二种方案。　　

　　详细来说，第二种方案要求有下面这么两个：

　　1、pc上html设置font-size与app保持一致(我们以50px为例)，确保dpr为1情况下相同元素在pc和app两端是相同的的。例如14px，在app屏幕dpr为1(即非高清屏)的情况下为0.28rem，同样在pc上也应该为0.28rem。也就是将ueditor中的字体选项10-28px的选项对应*0.02。

　　2、考虑我们的用户并不知道rem，所以展示还是要是14px这样的形式　　　

　　三、实现

　　根据上面的要求，要想修改ueditor的源码，首先得捋一下相关代码具体在哪，对于ueditor.all.js那几千行的代码来说，如果一点点看下去，显然有点不可取。我们应该搜索关键字。我们先看一下ueditor字号相关的部分长什么样子：

　　可以看到这部分的特殊的class是edui-for-fontsize,只有一个，代码如下

　　到这里大家应该就可以看出来设置字体和显示的地方了，具体看代码

 1 // @todo 修改为rem
 2             // var size = list[i] + \'px\';
 3             var size = (list[i]*2/100 )+ \'rem\';
 4             items.push({
 5                 // 字体栏显示的大小选项，这里还是显示px
 6                 label:list[i]+\'px\',
 7                 // 真正的值
 8                 value:size,
 9                 theme:editor.options.theme,
10                 // 可以从这里看出来，this.label显示   font-size就是字体大小了
11                 renderLabelHtml:function () {
12                     return \'<div class="edui-label %%-label" style="line-height:1;font-size:\' +
13                         this.value + \'">\' + (this.label || \'\') + \'</div>\';
14                 }
15             });

　　到这里起码看起来像那么回事了，展示的是px其实是rem。但是还有一个问题，每次切换字体大小之后都会变为0rem。

 

　　这个就太神奇了，明明没有零的存在呀。肯定是ueditor做了计算然后得出的。下面就是打断点寻找了。这个过程就不赘述了。发现了下面这段代码：

                        // 当修改字体的时候回去进行计算，因为px肯定是整数，所以会进行下面的做法
                        // 但是我们转成rem之后就是0.n，这样就有问题了
                        var styleVal = domUtils.getComputedStyle(startNode, style),
                            tmp = /^([\\d\\.]+)(\\w+)$/.exec( styleVal );
                       
                        if( tmp ) {
                             // @todo 修复计算问题，如果rem结尾说明是自身修改，改变计算方法    
                            if(tmp[2] == \'rem\'){
                                return  parseInt(tmp[1] * 50) + \'px\'
                            }    
                            // 计算出来之后，0.nrem得到的只是orem
                            return Math.floor( tmp[1] ) + tmp[2];

                        }

                        return styleVal;

                    }

　　改完之后可以查看下显示，正常了。但是好像设置了之后字体并没有真正的那么大。这又是为什么呢？

　　老办法，直接打开控制台查看吧，看这段p到底是什么样式。

 

　　可以看出来这里确实是对应的0.72rem了，html是50px的基础size的话，为什么不生效呢。且慢，我们看一下输入框里的内容都是嵌在iframe里的，这下就明白了，我们给iframe设置个font-size就好了。在ueditor->theme->iframe.css下面我们可以进行设置

　　到这里我们的改造就基本完成了。

　　四、总结

　　前面提到了，本文不是ueditor的教程，可能大神会有更简洁的方式。看起来也就这么点代码量，涉及的东西也不多，但当时确实花了我不少的时间。对我而言可能更多的收获还是解决和定位问题的能力的锻炼。其实对于我们程序员来说修bug的能力是相当重要的，不仅仅是自己写出来的，也许是第三方插件的，也许正常情况下不是问题，但是用到我们具体的场景下某些条件就成了限制。最难修的永远是别人的bug，遇到这种情况，最重要的不盲目和自信，绕过去的问题永远是你的问题，敢于去迎接挑战才能提升自己。