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

自动生成编辑器

主要函数：

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>

最后

以上就是笑点低板栗为你收集整理的[wangEditor] wangEditor富文本编辑器使用的全部内容，希望文章能够帮你解决[wangEditor] wangEditor富文本编辑器使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。