资源描述：
《轻量级富文本编辑器wangeditor源码结构介绍》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。
1、从我发布wangEditor到现在，大概有七八个月了，随着近期增加的插入视频，表情，地图这三个功能，目前为止基本的功能已经大体完善了。这期间也修改了几个bug，都是各位网友反映的。至于程序是不是已经很稳定了，我不敢说。毕竟应用的人不是特别多，目前只有几十个关注wangEditor的人在应用。他们会偶尔提出一些bug，不过只要告诉我，我会第一时间解决，至少大家对我修改bug增加功能的速度和态度，还是比较认可的。 根据github记载，目前有105个commits，即我已经提交了105次代码更新，这个数量也会继续增加。大家有bug，有需求可以通过QQ群向我提交。2.介绍源码结构 wa
2、ngEditor.js源码目前2200多行，用书写文字书写博客的方式介绍它的结构，还真不是一件简单的事儿。所以，这里我就长话短说，尽量简单的介绍一下重点，不要搞的太罗嗦，否则大家最后会不耐烦的。 如果让我自己对这个源码的设计和架构做一个评价的话，我会打70分。它并不是完美的，但是它已经满足了我基本的需求。比方说，我最近新增的几个功能（插入视频，地图，表情）都是通过修改其中的配置项增加上去的，而没有改动源码中的核心部分。开放封闭原则——对扩展开放，对修改封闭，我想我已经基本做到了这一点。 最后，我分享wangEditor源码设计的目的，为的是让大家给一些意见。提出一些疑问，一些建议，或
3、者我目前还没有意识到的一些问题。总之，我是希望这个软件越做越好。3.一个jQuery插件 wangEditor是一款jQuery插件，也是基于jquery开发的（不理解jquery插件的同学，请自行补课，本文不讲）。定义一个jquery插件其实很简单，wangEditor.js源码的最后几十行定义了。//------------------------------------生成jquery插件------------------------------------$.fn.extend({/**options:{*$initContent:$elem,//配置要初始化内容*menuC
4、onfig:[...],//配置要显示的菜单（menuConfig会覆盖掉hideMenuConfig）*onchange:function(){...},//配置onchange事件，*uploadUrl:'string'//图片上传的地址*}*/'wangEditor':function(options){if(this[0].nodeName!=='TEXTAREA'){//只支持textareaalert('wangEditor提示：请使用textarea扩展富文本框。详情可参见作者的demo.html');return;}varoptions=options
5、
6、{},menuC
7、onfig=options.menuConfig,$initContent=options.$initContent
8、
9、$('
'),onchange=options.onchange,uploadUrl=options.uploadUrl;//获取editor对象vareditor=$E(this,$initContent,menuConfig,onchange,uploadUrl);//渲染editor，并隐藏textareathis.before(editor.$editorContainer);this.hide();//页面刚加载时，初始化selectio
10、neditor.initSelection();returneditor;}}); 以上代码其实都很简单，就是接受一些配置项然后调用一个$E函数，返回一个editor对象，最后渲染到页面上。最关键的就是$E函数这一句话。//获取editor对象vareditor=$E(this,$initContent,menuConfig,onchange,uploadUrl); 大家看这种方式是不是有点 var$div=$('div'); 的意思？——对了，这的设计我就是模仿着jquery来的。4.仿jQuery的对象化设计 上文中提到的$E函数是这样定义的。//全局的构造函数$E=funct
11、ion($textarea,$initContent,menuConfig,onchange,uploadUrl){returnnew$E.fn.init($textarea,$initContent,menuConfig,onchange,uploadUrl);}; 如上代码，其实构造函数是$E.fn.init。$E只不过是一个入口，返回这个构造函数new出来的一个对象。 那么$E.fn是什么呢？——它是$E.prototyp
