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

　从我发布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 || $(pbr//p), onchange = options.onchange, uploadUrl = options.uploadUrl; //获取editor对象 var editor = $E(this, $initContent, menuConfig, onchange, uploadUrl); //渲染editor，并隐藏textarea this.before(editor.$editorContainer); this.hide(); //页面刚加载时，初始化selection editor.initSelection(); return editor; } }); 　　以上代码其实都很简单，就是接受一些配置项然后调用一个 $E 函数，返回一个 editor 对象，最后渲染到页面上。最关