轻量级富文本编辑器wangEditor源码结构介绍

1. 引言

　　wangEditor——一款轻量级html富文本编辑器（开源软件）

• 网站：http://wangEditor.github.io/
• demo演示：http://www.wangeditor.com/wangEditor/demo.html
• 下载（github）：https://github.com/wangfupeng1988/wangEditor
• QQ群：164999061

　　从我发布wangEditor到现在，大概有七八个月了，随着近期增加的插入视频，表情，地图这三个功能，目前为止基本的功能已经大体完善了。这期间也修改了几个bug，都是各位网友反映的。至于程序是不是已经很稳定了，我不敢说。毕竟应用的人不是特别多，目前只有几十个关注wangEditor的人在应用。他们会偶尔提出一些bug，不过只要告诉我，我会第一时间解决，至少大家对我修改bug增加功能的速度和态度，还是比较认可的。

　　

　　根据github记载，目前有105个commits，即我已经提交了105次代码更新，这个数量也会继续增加。大家有bug，有需求可以通过QQ群向我提交。

2. 介绍源码结构

　　wangEditor.js源码目前2200多行，用书写文字书写博客的方式介绍它的结构，还真不是一件简单的事儿。所以，这里我就长话短说，尽量简单的介绍一下重点，不要搞的太罗嗦，否则大家最后会不耐烦的。

　　如果让我自己对这个源码的设计和架构做一个评价的话，我会打70分。它并不是完美的，但是它已经满足了我基本的需求。比方说，我最近新增的几个功能（插入视频，地图，表情）都是通过修改其中的配置项增加上去的，而没有改动源码中的核心部分。开放封闭原则——对扩展开放，对修改封闭，我想我已经基本做到了这一点。

　　最后，我分享wangEditor源码设计的目的，为的是让大家给一些意见。提出一些疑问，一些建议，或者我目前还没有意识到的一些问题。总之，我是希望这个软件越做越好。

3. 一个jQuery插件

　　wangEditor是一款jQuery插件，也是基于jquery开发的（不理解jquery插件的同学，请自行补课，本文不讲）。定义一个jquery插件其实很简单，wangEditor.js源码的最后几十行定义了。

//------------------------------------生成jquery插件------------------------------------
    $.fn.extend({
        /*
        * options: {
        *   $initContent: $elem, //配置要初始化内容
        *   menuConfig: [...],   //配置要显示的菜单（menuConfig会覆盖掉hideMenuConfig）
        *   onchange: function(){...},  //配置onchange事件，
        *   uploadUrl: 'string'  //图片上传的地址
        * }
        */
        'wangEditor': function(options){
            if(this[0].nodeName !== 'TEXTAREA'){
                //只支持textarea
                alert('wangEditor提示：请使用textarea扩展富文本框。详情可参见作者的demo.html');
                return;
            }

            var options = options || {},
                menuConfig = options.menuConfig,
                $initContent = options.$initContent || $('<p><br/></p>'),
                onchange = options.onchange,
                uploadUrl = options.uploadUrl;

            //