重构wangEditor(web富文本编辑器),欢迎指正!

1. 前言

(下载源代码、使用说明、demo,请參见:https://github.com/wangfupeng1988/wangEditor

前段时间做过一个基于bootstrap的富文本编辑器——wangEditor,并公布到github上(https://github.com/wangfupeng1988/wangEditor),在博客园写了篇文章(http://www.cnblogs.com/wangfupeng1988/p/4088229.html)也受到了不少关注。

之所以有这次重构,是因下面原因。

  • 第一,bootstrap。做一个小小的web富文本编辑器,就依赖于bootstrap,未免有点小题大做。当时依赖于bootstrap是为了省去我绘制button、下拉框和弹出框的时间,有些偷懒。因此,本次重构弃用bootstrap
  • 第二,浏览器限制。由于本身用了bootstrap,就仅仅考虑了兼容bootstrap的浏览器,IE低版本号浏览器就没有考虑,这是一个弊端。因此,本次重构,兼容全部浏览器
  • 第三,有细心的朋友看了我的代码,对我提出了一些建议(尽管言辞上有些不大善意),他说“代码不够优雅”,事实上我的理解就是扩展性差。因此,本次重构,充分考虑了扩展性。可同意用户自己定义菜单。

技术分享

 

 

 

 

 

 

 

 

 

 

 

 

只是,重构后的wangEditor依旧非常轻量化,一个十几KB的js文件,一个3KB的css文件,搞定!使用起来也非常easy。一行代码搞定:

//事实上返回的 $editor 就是一个jquery对象,能够进行不论什么jquery的操作,比如 $editor.html() , $editor.text()
var $editor = $(‘#txtDiv‘).wangEditor();

2. 弃用bootstrap,自己开发样式和效果

弃用bootstrap后,不得不自己开发样式和效果。

第一,菜单的样式和排版事实上很easy,大家看到效果之后应该都明确。我这里依旧採用给了fontawesome作为icon字体库,不明确的能够看看《请用fontAwesome取代网页icon小图标》。

技术分享

第二,自己制作了一个tooltip的效果,即鼠标放在button上之后,弹出小框提示title,如图:

技术分享

第三,属于下拉框类型的button,右側会显示一个向下的箭头,如技术分享。点击之后,会弹出下拉框,blur(失去焦点)之后,下拉框隐藏。

技术分享

第四,自己制作了弹出框效果,弹出框显示后,下方有遮罩层隐藏页面全部内容,不同意点击。

技术分享

3. 兼容IE低版本号浏览器

首先,很感谢fontAwesome兼容了IE低版本号浏览器,否则我就得再自己去绘制icon图标,那可就麻烦大了。

样式上和效果上兼容IE低版本号应该没什么问题,大不了支持html5的能够显示圆角,IE低版本号不显示圆角,这个影响不大,也不影响使用。

技术分享

最基本的兼容在于,IE低版本号实现“选择”和“范围”的技术,与W3C不一致,它有自己的一套逻辑。不了解这块的朋友,能够想想IE在事件处理上,不管是绑定事件还是event參数的处理,都和W3C不一样,非常是讨厌!

为了实现兼容,就必需要全面考虑两者对“选择”和“范围”的不同实现方法,做浏览器兼容性測试,然后依据不同的情况,编写不同的代码。举个样例:

var supportRange = typeof document.createRange === ‘function‘;

if(supportRange){
            //w3c
            selection = document.getSelection();
            selection.removeAllRanges();
            selection.addRange(currentRange);
        }else{
            //IE8-
            range = document.selection.createRange();
            range.setEndPoint(‘EndToEnd‘, currentRange);
            if(currentRange.text.length === 0){
                range.collapse(false);
            }else{
                range.setEndPoint(‘StartToStart‘, currentRange);
            }
            range.select();
        }

看这段代码,你就能大体明确,两者的实现方式根本就不一样。

4. 考虑系统扩展性

我前半年看了不少设计模式的东西,也做过一个设计模式的教程《从设计到模式》,也研究过jquer的源代码,对系统的“扩展性”还是有一定的了解的。重构之前的wangEditor,由于重点放在了实现富文本的功能上,而忽略了扩展性的问题。这一次重构,我彻底的考虑了一下。

事实上对于富文本编辑器来说,最主要的扩展性应该考虑下面几点:

  • W3C和IE低版本号的兼容性;
  • 菜单怎样扩展,怎样自己定义排序、分组、显示/隐藏;
  • 命令(如加粗、字体颜色等)怎样扩展,怎样去弥补浏览器不完好的地方;
  • 基本配置(字体、颜色、字号)怎样扩展;
  • ……

以上这些扩展性的问题,在本次重构中都考虑到了,并做了对应的实现。扩展性好的系统,会帮助开发者以更清晰的思路升级、配置等。

5. 下一步……

下一步我想做几个样例,比如上传图片、插入高亮显示的code,来说明怎样去使用wangEditor。

再下一步,我会把wangEditor的源代码简介一遍,介绍怎样实现一个富文本框。

-------------------------------------------------------------------------------------------------------------

欢迎关注我的微博

也欢迎关注我的教程:

从设计到模式深入理解javascript原型和闭包系列》《微软petshop4.0源代码解读视频》《json2.js源代码解读视频

 

-------------------------------------------------------------------------------------------------------------

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。