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

官网地址：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></el-row>

js部分：

import WangEditor from 'wangeditor'
import { nextTick } from 'vue'const editor = ref()const content = ref({html: '',text: ''
})let flag = 0
let instance
watch(() => props.dialogFormVisible, //这里监听的是控制子页面展示与否的变量val => {// 首次打开时，初始化编辑器if (!instance) {flag = 1nextTick(() => {instance = new WangEditor(editor.value)Object.assign(instance.config, {onchange(val) {form.value.noticeContent = val}})instance.create()instance.txt.html(props.editData.noticeContent)})} else {instance.txt.html(props.editData.noticeContent)}}
)onBeforeUnmount(() => {instance.destroy()instance = null
})

注：以上是vue3.0写法不懂的可以随时查询官网地址也给小伙伴们准备好啦：Vue.js

以上是记录本人遇到的真实bug和解决方案也许有更好的解决方案欢迎私聊探讨技术问题

如果有错还请各位大佬指正

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

小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
小程序（二十五）微信小程序富文本编辑器editor上传图片
官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中,代码如下所示: insertImage(e) {console.log(e);const that = thiswx.chooseImag ...
微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
layui获取select 文本_小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
小程序开发笔记（二）：微信小程序富文本编辑器editor的使用
小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助. 小程序有详细的微信开发 ...
博客系统-写文章之富文本编辑器editor
editor 直接再官网下载下来之后从下载下来的文件选取有用的文件放到项目专门包下,注意下图可以选择下载好的文件中的上图部分,放入新建md中然后就是写文章页面 <!DOCTYPE html ...
微信小程序教程-富文本编辑器editor
效果图: 1.首先进入官方文档的editor地址 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 2.可点 ...
微信小程序富文本编辑器editor+rich-text(附源码)
之前小程序一直都是使用自己写的接口,小程序远程获取使用富文本编辑器的内容,比如UEditor,wangEditor等.我们可以选择插件wxparse和自带的rich-text,但是这些并不能完全转义他 ...
UNIAPP富文本编辑器editor组件图标不显示的问题解决
原文章https://blog.csdn.net/qq_40894259/article/details/109691380 将代码复制到项目中发现图标无法显示,但是功能可以实现,于是检查图标相关样 ...

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

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

最新文章

热门文章