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

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

  

时间: 2024-10-11 12:49:30

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

ASP.NET MVC5 中百度ueditor富文本编辑器的使用

随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor,另一种是ueditor的迷你版umeditor. 一.我们先讲完全版的ueditor. 1.建立数据模型. 2.建立对应的控制器和视图. 3.访问http://ueditor.baidu.com/website/download.html 进入开发版的下载页面,下载.net UTF-8版本,现在最新

百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

个人官网.公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个.项目后台用到了SpringMVC.Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配置Nginx代理.     在实际使用过程中,遇到了太多的问题,因此有必要梳理和总结下. 1. 先说百度UEditor在Java环境中的使用:1.1   Html页面或者Freemarker模版里,引入百度UEditor的相关JS和CSS,如下 <script type="text/javas

百度UEditor上传图片-再再总结一次

本周,CSDN有个网友遇到了百度UEditor上传问题,最后商定付50元钱,我帮他解决这个问题.    他最初想自己搞定这个问题,结果搞了好多次,好几天,还是没能解决.    2015年1月17日8:25~2015年1月18日00:24,4个小时终于搞定了这个问题. 1.总的感悟    本来预计1个小时,就能解决的,结果硬是花费了4个小时,挺无奈的. 虽说是帮客户解决一个问题,但实际上一个问题相关的问题,非常多.另外,就是解决这个问题,不是普通的咨询,已经参与到写代码.单步跟踪.QQ语音.QQ远

百度UEditor上传图片-再总结一次

晚上,在继续开发BriefCMS,把百度UEditor上传图片的问题,给解决了,终于解决了. 公司极简版CMS.BriefCMS.个人官网,最近2个月,与百度UEditor厮杀了好久.最值得吐槽的,就是百度UEditor的上传图片功能,感觉不够简便. 百度UEditor官方,在JSP场景下的应用,太简单了.对我以前写的项目来说,还可以. 对于最近的3个项目来说,就不灵活了. 因为,图片存储.controller.jsp都不是存储在webapps目录下,不能直接访问,都需要做映射. 无论是JSP.

百度UEditor编辑器关闭抓取远程图片功能(默认开启)

这个坑娘的功能,开始时居然不知道如何触发,以为有个按钮,点击一下触发,翻阅了文档,没有发现,然后再网络上看到原来是复制粘贴非白名单内的图片到编辑框时触发,坑娘啊............... 问题又来了:今天在写百度UEditor编辑器的[取远程图片功能]时有碰到:该功能如何关闭了? 又花了15分钟左右的时间查阅了[官方文档]以及[官方论坛],都没有找到解决办法,那就查阅下源文件看看,是否有相关的判断呢(本人JS非常烂) 于是马上查阅:ueditor.all.js文件,发现如下代码 // plu

Java往事之《百度UEditor插件配置图片上传问题》

百度UEditor插件配置图片上传问题 前言:之前第一次用到UEditor插件的时候,一脸懵逼!没错就是一脸懵逼,去UEditor插件官网下载了一个开发版的.然后对于新鲜技术好奇,本人就迫不及待的把它copy到了我的项目里,运行之后发现鼠标点到输入框里面的时候,什么鬼啊,握了棵草!上传图片的插件置灰了如下图1,一看还有一个多图片上传的插件还在,就赶紧点了一下,点开的那一瞬间我吃了一鲸,如下图2! 图1 图2 很好!下面看一下如何解决这个问题. 1.首先你可以到官网Ueditor,查看很详细的文档

【军哥谈CI框架】之CI中集成百度UEditor

Hello,各位亲,新的一周来临啦,很高兴这么快又跟大家伙见面!话说上一回,军哥带大家用JQuery写了一个城市级联菜单的例子 ,不知道亲们学会了多少,是否自己可以独立写出来了呢. 军哥很是期待大家学有所获的,有不明白的地方随时留言吧.好了,接下来,今天军哥要带大家来一起来完成如何在CI框架中集成百度的UEditor编辑器. 我们先简单来了解一下为什么选择百度UEditor编辑器? UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源

django之百度Ueditor富文本编辑器后台集成

Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因为百度富文本编辑器Ueditor没有对python的支持 步骤1: 在官网下载Ueditor的任意版本代码:http://ueditor.baidu.com/website/download.html#ueditor 步骤2: 将下载的代码放入到 django 项目中 步骤3:前端引用 在前端HTM

PHP如何搭建百度Ueditor富文本编辑器

本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor 第一步 引入javascript 在html中如入下面的js语句引入相关文件 ? 1 2 <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ued