重构wangEditor（web富文本编辑器），欢迎指正！

提示：最新版wangEditor请参见：wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor

---

 

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是为了省去我绘制按钮、下拉框和弹出框的时间，有些偷懒。所以，本次重构弃用bootstrap。
• 第二，浏览器限制。由于自己用了bootstrap，就只考虑了兼容bootstrap的浏览器，IE低版本浏览器就没有考虑，这是一个弊端。所以，本次重构，兼容全部浏览器。
• 第三，有细心的朋友看了个人代码，对我提出了一些建议（虽然言辞上有些不大善意），他说“代码不够优雅”，其实个人理解就是扩展性差。所以，本次重构，充分考虑了扩展性。可容许用户自定义菜单。

 

 

 

 

 

 

 

 

 

 

 

 

不过，重构后的wangEditor依然很轻量化，一个十几KB的js文件，一个3KB的css文件，搞定！使用起来也很是简单。一行代码搞定：

//其实返回的 $editor 就是一个jquery对象，能够进行任何jquery的操做，例如 $editor.html() ， $editor.text()
var $editor = $('#txtDiv').wangEditor();

2. 弃用bootstrap，本身开发样式和效果

弃用bootstrap后，不得不本身开发样式和效果。

第一，菜单的样式和排版其实很是简单，你们看到效果以后应该都明白。我这里依然采用给了fontawesome做为icon字体库，不明白的能够看看《请用fontAwesome代替网页icon小图标》。

第二，本身制做了一个tooltip的效果，即鼠标放在按钮上以后，弹出小框提示title，如图：

第三，属于下拉框类型的按钮，右侧会显示一个向下的箭头，如。点击以后，会弹出下拉框，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源码解读视频》

 

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