1. 介绍 === wangEditor——最轻量级web富文本编辑器，配置方便，使用简单。支持所有PC浏览器（包括IE6）。 demo演示地址：《wangEditor——轻量级web富文本框》

2. 如何使用？ === 2.1 引用fontAwesome和jQuery
   wangEditor中的那些漂亮的按钮小图标，不是作者画的，而是引用了当前web上最流行的icon字体库fontAwesome。此时也一并引用jQuery。

<link rel="stylesheet" type="text/css" href="fontawesome-4.2.0/css/font-awesome.min.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="fontawesome-4.2.0/css/font-awesome-ie7.min.css">
<![endif]-->

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<!-- 最后，为了安全起见，强烈建议大家引用 xss.js 。对于 xss.js 下文会有介绍-->
<script type="text/javascript" src="js/xss.js"></script>

2.2 引用wangEditor.js和wangEditor.css
使用wangEditor当然要引用它的js和css文件。

<link rel="stylesheet" type="text/css" href="css/wangEditor-1.2.0.css">
<script type="text/javascript" src='js/wangEditor-1.2.0.js'></script>

2.3 生成富文本框
首先，要在html中建一个div。注意，这个div必须设置id='wangEditorTxt'。

<!-- 注意，下一行 id='wangEditorTxt' 是必须的！ -->
<div id='wangEditorTxt' style='border:1px solid #cccccc; height:240px;'>
    <p>欢迎使用<b>wangEditor</b>，请输入内容...</p>
</div>

然后，一句话即可把这个div变为富文本框，代码如下。注意，返回的$editor其实是一个jQuery对象，可以通过$editor获取、更改富文本框中的内容。

<script type="text/javascript">
    $(function(){
    	//其实返回的 $editor 就是一个jquery对象，可以进行任何jquery的操作，例如 $editor.html() ， $editor.text()
    	var $editor = $('#wangEditorTxt').wangEditor();
    });
</script>

3. 自定义菜单 === wangEditor支持两种方式的自定义菜单————自定义隐藏某些菜单，强制自定义要显示的菜单。注意，后者会覆盖掉前者！

var $editor = $('#wangEditorTxt').wangEditor({
	//配置要隐藏的菜单（数组）
    'hideMenuConfig': ['insertHr', 'uploadImg'],

    //自定义菜单配置（数组）（会覆盖掉'hideMenuConfig'的配置）
    'menuConfig': ['bold', 'italic', '|', 'foreColor', 'backgroundColor']
});

wangEditor默认情况下将显示所有的菜单，菜单id如下：

[
	'fontFamily', 'fontSize', '|', 
	'bold', 'underline', 'italic', '|', 
	'setHead', 'foreColor', 'backgroundColor', 'removeFormat', '|', 
	'indent', 'outdent', '|',
	'unOrderedList', 'orderedList', '|', 
	'justifyLeft', 'justifyCenter', 'justifyRight', '|', 
	'createLink', 'unLink', '|', 
	'insertHr', 'insertTable',  'insertCode', '|', 
	'webImage', 'uploadImg', '|',
	'undo', 'redo'
]

其中，insertCode(插入代码)和uploadImg(上传图片)默认不会显示出来，这两个菜单需要其他的支持，下文有介绍。

4. 配置“插入代码”功能 === 插入代码insertCode按钮默认是不会显示出来的，因为缺少代码高亮插件的支持。要想显示插入代码insertCode功能，只需要在页面中引用wangHighLighter.js，即可让该菜单显示。

<script type="text/javascript" src='js/wangHighLighter-1.0.0-min.js'></script>

wangHighLighter.js现在地址：https://github.com/wangfupeng1988/wangHighLighter
注意，一定要在使用wangEditor之前引入，否则无效！

5. 配置“上传图片”功能 === 上传图片uploadImg按钮默认不会显示出来，因为缺少上传图片的插件支持。wangEditor中上传图片的功能是通过集成uploadify.js实现的。因此，必须要在页面中引用uploadify的js和css，并且配置uploadify的参数，即可让该菜单显示。

<link href="uploadify/uploadify.css" rel="stylesheet" >
<script src="uploadify/jquery.uploadify.min.js"></script>

注意，必须在使用wangEditor之前引入，否则无效！
引入uploadify之后，需要配置uploadify，在wangEditor()方法中配置即可。

var $editor = $('#wangEditorTxt').wangEditor({
	'uploadifyConfig':{
		height: 30,
		width: 120,
		swf: 'uploadify/uploadify.swf',
		uploader: 'data.ashx',
		buttonText: '选择图片'
    	//其他自定义的uploadify配置项……
    },
});

6. 如何过滤XSS？ === xss是现在网络攻击的常用手段，尤其对于富文本框来说，过滤xss是非常重要的一份工作。术业有专攻，wangEditor不是过滤xss的专家，但是可以借助专家的力量。
   因此，强烈建议大家引用xss.js，wangEditor已经做好集成工作，只需要页面引用即可。
   下载地址：https://raw.github.com/leizongmin/js-xss/master/dist/xss.js

<script type="text/javascript" src="js/xss.js"></script>

7. 交流 === 交流QQ群：164999061
   二次开发联系：wangfupeng1988#163.com（#->@）