自动生成编辑器
主要函数:
var editor = new wangEditor(dom);
editor.create();
- 作用:创建一个编辑器
- 参数:
dom
获取HTML一个节点
常用 div1
元素生成编辑器。
用div
元素生成的编辑器时,wangEditor直接将该div变成一个可编辑区域,内容的改动无需拷贝。
注意:wangEditor 从v3版本开始不支持 textarea
使用 id
生成编辑器
<div id="div1">
<p>请输入内容...</p>
</div>
<!-- 引入jQuery和框架的js -->
<script src="/jquery-1.12.4.js"></script>
<script src="/wangEditor-3.1.1/release/wangEditor.min.js"></script>
<script>
var editor = new wangEditor('#div1');
editor.create();
</script>
使用 Element
生成编辑器
从v2.1.4
版本开始,wangEditor支持使用element元素生成编辑器,代码如下:
<div id="div1">
<p>请输入内容...</p>
</div>
<!-- 引入jQuery和框架的js -->
<script src="/jquery-1.12.4.js"></script>
<script src="/wangEditor-3.1.1/release/wangEditor.min.js"></script>
<script>
// 获取 div 标签
var div1 = document.getElementById("div1")
// 得到 wangEdior 对象
var editor = new wangEditor(div1);
// 创建文本编辑器
editor.create();
</script>
内容处理
初始化内容
通过 HTML 初始化内容
可直接将要初始化的 HTML 内容,放在将要用来创建编辑器的 div
标签里面
<div id="div1">
<p>要初始化的内容</p>
</div>
<!-- 引入jQuery和框架的js -->
<script src="/jquery-1.12.4.js"></script>
<script src="/wangEditor-3.1.1/release/wangEditor.min.js"></script>
<script>
// 得到 wangEdior 对象
var editor = new wangEditor('#div1');
// 创建文本编辑器
editor.create();
</script>
通过 JavaScript 初始化内容
编辑器创建完成后,可使用 editor.txt.html()
方法初始化内容。
editor.txt.html(html)
:
- 参数:
html
- 带 HTML 标签的内容 - 作用:解析参数,把内容返回给页面
<div id="div1"></div>
<!-- 引入jQuery和框架的js -->
<script src="/jquery-1.12.4.js"></script>
<script src="/wangEditor-3.1.1/release/wangEditor.min.js"></script>
<script>
// 得到 wangEdior 对象
var editor = new wangEditor('#div1');
// 创建文本编辑器
editor.create();
// 初始化编辑器的内容
editor.txt.html('<p>要初始化的内容</p>')
</script>
获取内容
想要获取当前编辑区域的内容,可使用 editor.txt.html()
和 editor.txt.text()
获取。
editor.txt.html()
:作用 - 获取编辑区的 html 结构editor.txt.text()
: 作用 - 获取编辑区的纯文本
<div id="div1">
<p>请输入内容...</p>
</div>
<button id="btn1">获取内容</button>
<!-- 引入jQuery和框架的js -->
<script src="/jquery-1.12.4.js"></script>
<script src="/wangEditor-3.1.1/release/wangEditor.min.js"></script>
<script>
// 得到 wangEdior 对象
var editor = new wangEditor('#div1');
// 创建文本编辑器
editor.create();
$('#btn1').click(function () {
// 获取编辑器区域完整html代码
var html = editor.txt.html();
console.log("html方法:" + html);
// 获取编辑器纯文本内容
var text = editor.txt.text();
console.log("text方法:" + text);
});
</script>