客户端配置说明
下载
百度网盘地址：点我下载
下载密码：x09x
使用
首先要引入wangEditor的js文件，然后引入jQuery
然后在body里：
<body>
<button id="btn1">查看HTML内容</button>
<button id="btn2">查看文本内容</button>
<button id="btn3">设置Edit文本</button> <div id="editor">
<p>aaa</p>
</div>
</body>
之后写创建富文本编辑器的 js
<script type="text/javascript">
$(function() {
var E = window.wangEditor;
var editor = new E('#editor');
editor.create()
</script>
然后访问一下，就会出现下面效果，为了掩饰查看输入的效果我设置了几个按钮，用来显示不同的显示效果
（1）给第一个按钮添加点击事件，点击第一个按钮，就会弹出文本框中的文字，并以HTML的形式显示，实现代码和显示效果如下所示
//点击按钮获取编辑框中的内容(html形式)
$("#btn1").click(function() {
var text = editor.txt.html();
alert(text);
})
（2）给第二个按钮添加点击事件，点击第二个按钮，就会弹出文本框中的文字，并以输入的文本的形式显示，实现代码和显示效果如下所示
//点击按钮获取编辑框中的内容(纯文本形式)
$("#btn2").click(function() {
var text = editor.txt.text();
alert(text);
})
（3）给第三个按钮添加点击事件，点击第三个按钮，会给文本框赋值，实现代码和显示效果如下所示
//点击按钮获设置Edit文本
$("#btn3").click(function() {
editor.txt.html("勤快的懒羊羊博客");
})
拓展
这个编辑器的工具栏有很多工具，如果不想显示太多，可以在创建编辑器的同时修改编辑器的菜单栏，代码和显示效果如下
$(function() {
var E = window.wangEditor;
var editor = new E('#editor');
editor.customConfig.menus = [
'head',
'bold',
'italic',
'underline'
]
editor.create()
wangEditor编辑器的简单使用就到此结束了，下面是这个页面的源代码。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/wangEditor.js"></script> <script type="text/javascript">
$(function() {
var E = window.wangEditor;
var editor = new E('#editor');
editor.customConfig.menus = [
'head',
'bold',
'italic',
'underline'
]
editor.create() //点击按钮获取编辑框中的内容(html形式)
$("#btn1").click(function() {
var text = editor.txt.html();
alert(text);
}) //点击按钮获取编辑框中的内容(纯文本形式)
$("#btn2").click(function() {
var text = editor.txt.text();
alert(text);
}) //点击按钮获设置Edit文本
$("#btn3").click(function() {
editor.txt.html("勤快的懒羊羊博客");
}) })
</script> </head>
<body>
<button id="btn1">查看HTML内容</button>
<button id="btn2">查看文本内容</button>
<button id="btn3">设置Edit文本</button> <div id="editor">
<p>aaa</p>
</div>
</body>
</html>