提到富文本,可能大家都用到过百度的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,遇到这种情况,最重要的不盲目和自信,绕过去的问题永远是你的问题,敢于去迎接挑战才能提升自己。