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

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

  一、问题

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

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

因为高清屏下面,进行了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字号相关的部分长什么样子:

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

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

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

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

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

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

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

  这个就太神奇了,明明没有零的存在呀。肯定是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; }

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

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

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

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

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

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

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

  四、总结

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

  

上一篇:linux 下的对拍


下一篇:ServletContext作用