wangEditor富文本编辑器的简单使用

介绍wangEditor是一个轻量级 web 富文本编辑器，配置方便，使用简单。官网：www.wangEditor.com文档：www.wangeditor.com/doc源码：github.com/wangeditor-team/wangEditor用于 Vue 和 React在 Vue 中使用 wangEditorvue3 可参考 wangEditor-with-vue3vue2 可参考 wa

林啾啾

3018人浏览 · 2021-12-06 09:09:43

林啾啾 · 2021-12-06 09:09:43 发布

介绍

wangEditor是一个轻量级 web 富文本编辑器，配置方便，使用简单。
官网：www.wangEditor.com
文档：www.wangeditor.com/doc
源码：github.com/wangeditor-team/wangEditor

用于 Vue 和 React

在 Vue 中使用 wangEditor
vue3 可参考 wangEditor-with-vue3
vue2 可参考 wangEdior-with-vue 。
在 React 中使用 wangEditor
如果要自己动手开发，可参考 wangEditor-with-react 。
如果想要用现成的插件，可参考 wangeditor-for-react 。

下载

下载
npm 安装 npm i wangeditor --save

CDN 链接 https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js

基本使用

NPM
npm i wangeditor --save

安装后几行代码即可创建一个编辑器：

import E from "wangeditor"
const editor = new E("#div1")
editor.create()

常用的设置

设置编辑区域的高度

编辑区域高度默认为 300px ，可通过以下方式修改。

const editor = new E('#div1')

// 设置编辑区域高度为 500px
editor.config.height = 500

// 注意，先配置 height ，再执行 create()
editor.create()

菜单和编辑区域分离

菜单和编辑区域其实就是两个单独的

，位置、尺寸都可以随便定义。

<head>
    <style>
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            min-height: 400px;
        }
    </style>
</head>
<body>
    <p>
        container 和 toolbar 分开
    </p>
    <div>
        <div id="toolbar-container" class="toolbar"></div>
        <p>------ 我是分割线 ------</p>
        <div id="text-container" class="text"></div>
    </div>

    <!-- 引入 wangEditor.min.js -->
    <script>
        const E = window.wangEditor
        const editor = new E('#toolbar-container', '#text-container') // 传入两个元素
        editor.create()
    </script>
</body>

一个页面多个编辑器

在页面只使用一个编辑器时可以使用ref获取页面元素，页面有两个编辑器的时候用id获取页面元素。

<head>
    <style type="text/css">
        .toolbar {
            background-color: #f1f1f1;
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="div1" class="toolbar">
    </div>
    <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
    <div id="div2" class="text">
        <p>第一个 demo（菜单和编辑器区域分开）</p>
    </div>

    <div id="div3">
        <p>第二个 demo（常规）</p>
    </div>

    <!-- 引入 wangEditor.min.js -->
    <script type="text/javascript">
        const E = window.wangEditor

        const editor1 = new E('#div1', '#div2')
        editor1.create()

        const editor2 = new E('#div3')
        editor2.create()
    </script>
</body>

如果在控制台报错“找不到节点”，要注意是不是使用了v-if将页面元素隐藏了导致获取不到DOM节点。两个编辑器要注意命名冲突和使用位置。

设置内容

html 初始化内容（尽量使用这种方式）
直接将内容写到要创建编辑器的

标签中。

<div id="div1">
    <p>初始化的内容</p>
    <p>初始化的内容</p>
</div>

<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    editor.create()
</script>

js 设置内容
创建编辑器之后，使用 editor.txt.html(…) 设置编辑器内容。

<div id="div1">
</div>

<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    editor.create()
    editor.txt.html('<p>用 JS 设置的内容</p>') // 重新设置编辑器内容
</script>

追加新内容

创建编辑器之后，可使用 editor.txt.append('<p>追加的内容</p>') 继续追加内容。

获取 html

使用 editor.txt.html() 获取 html 。

需要注意的是：从编辑器中获取的 html 代码是不包含任何样式的纯 html。

获取 text

使用 editor.txt.text() 获取 text 文本。

清空内容

可使用 editor.txt.clear() 清空编辑器内容。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^