• 站：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增加功能的速度和态度，还是比较认可的。

　　大家看这种方式是不是有点 var $div = $(‘div’); 的意思—对了，这的设计我就是模仿着jquery来的。

　　上文中提到的 $E 函数是这样定义的。

　　如上代码，其实构造函数是 $E.fn.init 。$E 只不过是一个入口，返回这个构造函数 new 出来的一个对象。

　　那么 $E.fn 是什么呢——它是 $E.prototype 的简写而已——好多js系统都喜欢这么干，我也就随着高大上一些啦！

　　既然 $E.fn.init 是构造函数，那么它 new 出来的对象（即上文中的 editor）的原型要指向：$E.fn.init.prototype ，这样岂不是太长如来个简单一些的，将原型指向 $E.fn 吧。

　　到了这里，没有看过jquery设计或者源码的人，一定觉得绕晕了——那是很正常的。我一开始接触jquery时，也是绕不过来。不过后来看多了，再后来自己用起来，还真觉得挺简单易用。大家在做自己的js代码时候，也不放试一试！

　　其实这里也是仿照jquery来设计的。在jquery中，函数都是 $ 的属性，例如 $.trim() ，对象函数都是 $.fn 的属性，例如 $(‘div’).html() 的 html 方法就是 $.fn.html 定义的。

　　在wangEditor.js也一样。有许多工具函数（例如log输出，引 转译，url安全性检查等）都是 $E 的属性；许多对象函数（例如text，append，change等）都是 $E.fn 的属性。

　　为什么把函数定义在 $E.fn 上即可成为对象函数呢—因为构造函数是 $E.fn.init ，而 $E.fn.init.prototype = $E.fn;  不知道大家明白了没有/p>

　　wangEditor目前有28个功能菜单，不可能为每一个菜单都写一遍执行代码。因为我们是面向对象的编程，我们是遵循“开放封闭原则”的设计。

　　首先，我们需要把所有的菜单归归类，否则如何确定配置项啊把所有的菜单分为4类：

• command类型：点击按钮即可执行命令，如“粗体”，“下划线”
• dropMenu类型：点击按钮弹出下拉menu，再选择命令。如“字体”，“字 ”
• dropPanel类型：点击按钮弹出panel，再选择命令。如“背景色”，“表情”
• modal类型：点击按钮弹出对话框，需要填写内容，再执行命令。如“插入图片”，“插入地图位置”

　　下面是一个菜单按钮配置时的说明：

　　再配置一个菜单时，必须要遵守这个规则，否则解析引擎无法正确解析配置项。在此，为每个类型的菜单按钮，粘贴几个简单的配置项：

　　最后还是欢迎大家多多指正！

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

————————————————————————————————————-

我的教程：《从设计到模式》《深入理解javascript原型和闭包系列》《css知多少》《微软petshop4.0源码解读视频》《json2.js源码解读视频》

————————————————————————————————————-