集成富文本插件 wangeditor

官网：wangeditor (opens new window)

在Vue3项目中安装

npm i wangeditor --save

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

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

我们在页面中添加表单内容

<a-modal title="文档表单" v-model:visible="modalVisible" :confirm-loading="modalLoading" @ok="handleModalOk">
    <a-form :modal="doc" :label-col="{span: 6}">
      <a-form-item label="名称">
        <a-input v-model:value="doc.name"/>
      </a-form-item>
      <a-form-item label="父文档">
        <!-- replaceFields 替换 treeNode 中 title,value,key,children 字段为 treeData 中对应的字段 -->
        <a-tree-select
            v-model:value="doc.parent"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeSelectData"
            placeholder="请选择父文档"
            tree-default-expand-all
            :replaceFields="{title: 'name', key: 'id', value: 'id'}"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item label="排序">
        <a-input v-model:value="doc.sort"/>
      </a-form-item>
      <a-form-item label="内容">
        <div id="content"></div>	<!-- 这一块div放富文本内容 -->
      </a-form-item>
    </a-form>
  </a-modal>

我们在setup()中进行定义

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

页面并没有显示

这里我们一开始是写在了一个Modal里。

1. 我们认为不显示的原因是在setup()里，create()方法没有执行到，所以将editor.create()放到onMounted里，但是还是没有显示。
2. 其次，我们把<div id="content"></div>移除出模态框进行显示，看看是否能够显示出来，这一次是显示出来了，于是我们又将create方法放进setup里，看看能否成功，结果不能；所以，主要问题还是模态框的问题。
3. 因为页面Modal初始不显示，我们页面上根本就没有这样的一个元素，所以初始的时候我们写#id去获取这个选择器的时候选择不到任何的元素，所以它不显示。跟页面上有没有这个元素有关系

进行调整

我们此时将渲染的方法写到点击编辑和新增的时候弹出模态框也就是创建模态框的方法里

// 编辑
const edit = (record: any) => {
    modalVisible.value = true

    setTimeout(() => {
        editor.create()
    }, 100)
}

// 新增
const add = () => {
    modalVisible.value = true

    setTimeout(() => {
        editor.create()
    }, 100)
}

提示

这里我们还加了延时器，这里主要还是因为你页面创建Modal的时间可能会比执行create方法要慢，所以加了一个延时器