1. 介绍&下载

wangEditor是用javascript编写的轻量级web富文本编辑器，依赖于jQuery和fontAwesome字体库，支持所有浏览器。使用wangEditor可以轻松创建web富文本框，并可以自定义扩展菜单功能。wangEditor所有源码都已经在github上开源下载。

下载地址：https://github.com/wangfupeng1988/wangEditor

交流QQ群：164999061

2. 生成富文本框

2.1 下载

从https://github.com/wangfupeng1988/wangEditor下载源码所有内容，文件夹结构如下：（不在截图中的文件可以忽略）

以上截图注意：

• 划红线的两个文件是未经过压缩的css和js，下载下来之后可以删除掉，使用压缩版本的文件即可。
• 当前版本为1.1.0，截图和说明都按照这个版本来。如果后期更新了版本，此处的截图和说明不一定及时更新，到时候可以按照最新的来使用。使用方法都是一样的。

2.2 新建html文档

新建一个html文档，很简单，不必说了：

2.3 引用jquery和fontAwesome

在刚才新建的html文档中引用jquery和fontAwesome。如果你的页面已经应用了这些，那就更好了，可以省略这一步。这里注意，应用fontAwesome时要同时引用兼容IE7的文件。

（另外，不了解fontAwesome的朋友，可以看看《请用fontAwesome代替网页icon小图标》，很简单，很实用）

这里注意，javascript文件的应用最好放在body的最下方。

2.4 引用wangEditor.min.css和wangEditor.min.js

在刚才的基础上，在引用wangEditor所需要的css和js文件，很简单，直接看截图：

这里注意，先引用jquery，再引用wangEditor.min.js，注意先后顺序。

2.5 创建一个div

该引用的都引用了，接下来要我们去自己创建了。第一步要创建的是一个div，很简单。

这里注意：

• div要设置一个id，方便下一步通过jquery获取它；
• div要设置一个默认的高度，否则wangEditor会给你一个默认的高度（还是自己设置的好）；
• div最好给一个边框border样式，否则出来的编辑器就无边框了；
• div其中的内容，可以是任何html代码，就是你要在富文本框中初始化显示的内容；

这里将高度和border的样式都放在外部，让使用者自由处理。

2.6 生成富文本框

上一步创建了一个div，这一步我们要用它来生成一个富文本框，也很简单。

截图中就一句话，即可把一个div生成一个富文本框。此时运行程序，你就可以看到效果啦：

效果跟你预想的是不是一样？创建这个页面你花了几分钟？是否很简单？

有人可能会疑问：为何要创建一个“var $editor”，“$editor”到底是一个什么东西？——别着急，下文还有介绍。

3. 使用富文本框

刚刚提出了一个疑问，下面就要解答。

这里的“$editor”到底是个什么东西？——其实，执行这句代码后，返回的对象赋值给“$editor”，而返回的就是一个jQuery对象。即，“$editor”中促出的就是一个jQuery对象，一个$(‘#div‘)。通过下面的例子，我们就可以明白了：

看到了吧，要求不高——你只要会使用jquery，你就能轻松应对wangEditor！

4.自定义菜单配置

wangEditor支持多种菜单的配置方式，包括：

• 强制自定义；
• 自定义隐藏某些菜单；
• 在已知菜单前面插入若干个菜单；
• 在已知菜单后面追加若干个菜单；

以上这四种，本文只能讲前两种。因为后两种需要新增一个菜单，而现在咱们还没有开始新增菜单，所以先不讲。

4.1 强制自定义

举一个极端的例子：我现在要做一个最简单的富文本框，只需要一个“粗体”和“下划线”这两个功能，其他的都不要，而且这两个要用“|”分隔。

效果很明显吧？

其实这里传入一个数组（不要忘记两边的“{ }”），已经把wangEditor中默认的菜单配置给覆盖了。wangEditor中默认的配置如下：

如果不穿如任何强制自定义的菜单配置，wangEditor会默认按照这个配置来。如果你想自己去自定义配置，那就随便自定义，只要符合规则即可。

4.2 自定义隐藏

通过上文的强制自定义介绍，自定义隐藏也就很好理解了，无非就是传入一个要隐藏哪些的数组而已。

例如，现在要隐藏掉字体和字号：

5. 总结

本文介绍的是wangEditor最简单最基本的应用。本文所使用的代码，可以在下载文件夹中的“demo_basic.html”查看。

下一篇文章我将介绍如何为wangEditor扩展一个最简单的按钮，敬请期待吧！

下载地址：https://github.com/wangfupeng1988/wangEditor

交流QQ群：164999061

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

欢迎关注我的微博。

也欢迎关注我的教程：

《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》

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

轻量级web富文本框——wangEditor使用手册（1）——基本应用