发现问题


 

富文本编辑器,相信很多程序猿在项目中都使用过,就算开发中没有使用,平时总会接触到。

发现这个现象,来自于客户的一次需求,我一直在项目中使用百度的UMeditor,这个可以理解为是精简的UEditor ,先放一张图。

emwin增加英文最大字体 emeditor字体大小_解决方案

图上可以看到字体最大能设置到48(对应48px),客户这边要求提供更多的字号供选择。

程序猿一贯逻辑,这个需求简单,分分钟解决。使用过这款编辑器的都知道百度是提供了可配置文件的,其中修改字号的地方见下图。

emwin增加英文最大字体 emeditor字体大小_程序猿_02

进展到这里,按照常理功能就修改完了(增加字号后,富文本编辑器上面出现了新增的字号)。事实上要不是我动手测试了下,也就这么过去了,然后现实还是很残酷的。奇怪的现象出现了,无论我选择多大的字体(超过48px以上的字体),文本的字体还停留在以前的字体大小(也就是说以前是16px,我就算选了100px,它还是留着16px,但是我如果选择24px、36px、48px这些字体大小就变了)。

即然我深信我配置没有问题(毕竟参考了百度大厂的文档配置的),那么就来查看源码吧。

emwin增加英文最大字体 emeditor字体大小_emwin增加英文最大字体_03

从源码跟进来看,大厂居然把字体和对应尺寸写死啦(当我第一次看到这个代码的时候,我突然第一次发现我的代码和大厂高手写的代码如此的相似,是不是我也拥有了去大厂工作的能力了?)。动手能力强的我决定改源码,增加一堆新的字号和对应的尺寸(前面的是px后面的对应的是字号)。

满心欢喜的我以为这下需求解决了,然后现实再一次打了脸,依然无效。好吧,大厂的代码就深奥,可能有其他我没有修改到的地方,继续跟源码。

emwin增加英文最大字体 emeditor字体大小_解决方案_04

 

终于跟到了执行更新字号的地方,一句执行命令,传入了方法类型和字号,翻译下来如下:

this.document.execCommand("fontsize", false, 7);

  

查找原因


 

通过上面的我们知道7对应了42px的字号。那我手动执行下命令看看效果。

emwin增加英文最大字体 emeditor字体大小_百度_05

emwin增加英文最大字体 emeditor字体大小_程序猿_06

emwin增加英文最大字体 emeditor字体大小_emwin增加英文最大字体_07

依次执行了传入字号 1 7 10,测试结果发现10没有变化。那么原因在哪?查看下官方文档吧。

emwin增加英文最大字体 emeditor字体大小_程序猿_08

官方文档上面提到了字体尺寸(1-7),这个是重点圈起来要考!!!

解决方案


 

至此疑问解决了,解决方案直接见下面代码吧。

document.execFontSize = function (size, unit) {
    var spanString = $('<span/>', {
        'text': document.getSelection()
    }).css('font-size', size + unit).prop('outerHTML');

    document.execCommand('insertHTML', false, spanString);
};