[wangEditor] wangEditor富文本编辑器使用

86 阅读 0 评论 57 点赞

我是靠谱客的博主笑点低板栗，这篇文章主要介绍[wangEditor] wangEditor富文本编辑器使用，现在分享给大家，希望可以做个参考。

自动生成编辑器

主要函数：

复制代码

1
2
3
var editor = new wangEditor(dom);
editor.create();

作用：创建一个编辑器
参数：dom 获取HTML一个节点

常用 div1 元素生成编辑器。

用div 元素生成的编辑器时，wangEditor直接将该div变成一个可编辑区域，内容的改动无需拷贝。

注意：wangEditor 从v3版本开始不支持 textarea

使用 `id` 生成编辑器

复制代码

1
2
3
4
5
6
7
8
9
10
11
<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元素生成编辑器，代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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 标签里面

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 标签的内容
作用：解析参数，把内容返回给页面

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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(): 作用 - 获取编辑区的纯文本

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>