富文本编辑器editor初次无法加载的问题

个人日记

已于 2022-04-29 23:50:50 修改

阅读量1k

点赞数

文章标签：前端编辑器

于 2022-04-29 23:39:43 首次发布

本文链接：https://blog.csdn.net/m0_64667302/article/details/124505980

版权

在使用wangEditor 4.7.13版本时，将官方示例代码复制到Vue 3.0项目中，首次打开modal时因DOM未初始化导致错误。分析原因是modal在打开时才初始化DOM。解决方法包括在vue和js部分进行相应调整，确保编辑器在modal打开前正确初始化。本文记录了问题与解决方案，并欢迎讨论更优解。

摘要由CSDN通过智能技术生成

官网地址：wangEditor

下载editor版本为：4.7.13 复制editor富文本编辑器官网的代码案例到项目里面后有如下报错：

报错原因分析：modal第一次打开的时候才初始化dom，所以直接引入粘贴代码会报错。

解决方案：

vue部分：

 <el-row :gutter="20">

        <el-col :span="24">

          <el-form-item label="内容:" prop="noticeContent">

            <input v-model="form.noticeContent"  style="display:none"/>

            <div ref="editor"></div>

            <div :innerHTML="content.html"></div>

          </el-form-item>

        </el-col&