ueditor在弹出层的使用（vue2+elementui+ueditor）
ueditor使用场景
uedior的格式是最像word的，word复制的内容在ueditor中粘贴多数情况格式都是能保留的。如果公司需求需要一个像word的编辑器，可以优先考虑ueditor
本人试过的错（这个是我遇到问题的分析）
弹出层里面直接放入ueditor出现的问题是
- 在页面挂在的时候不打开弹出层导致的问题：
- 报错：
Uncaught TypeError: Cannot read properties of null (reading 'offsetHeight') - 同时打开弹出层编辑器不显示（ueditor应该是网页加载的时候就自动创建的）
- 报错：
解决办法：页面挂在完毕后打开弹出层，dom渲染完毕后关闭弹出层（会出现加载显示弹出层的bug） 解决代码：👇👇👇👇👇
// html中
// 用于解决加载显示弹出层的bug
<el-dialog :class="showDialog?'showDialog':'hideDialog'">
<div id="container"></div>
</el-dialog>
// css中
.showDialog {
visibility: visible;
}
.hideDialog {
visibility: hidden;
}
// mounted中
// showDialog控制弹出层是否可见
// 用于解决加载显示弹出层的bug
this.showDialog = false
// 用于解决报错和编辑器不出现
this.dialogVisible = true
this.$nextTick(() => {
this.dialogVisible = false
})
- 但是这个时候又出现上传图片，添加表格的盒子优先级不够，这个时候不管怎么调盒子z-index都不行。
于是我就将编辑器放到一个新页面，通过iframe引入
ueditor在弹出层中的使用（正确的写法）
- 编辑器页面自己编写，很简单，实在不会上网查
解决代码：👇👇👇👇👇
// html中
// 用于解决加载显示弹出层的bug
<el-dialog :class="showDialog?'showDialog':'hideDialog'">
<iframe src="./addEditRateEditor.html" frameborder="0" id="rateIframe" style="width:100%;height:542px;"></iframe>
</el-dialog>
// css中
.showDialog {
visibility: visible;
}
.hideDialog {
visibility: hidden;
}
// mounted中
// showDialog控制弹出层是否可见
// 用于解决加载显示弹出层的bug
this.showDialog = false
// 用于解决报错和编辑器不出现
this.dialogVisible = true
this.$nextTick(() => {
this.dialogVisible = false
})
设置获取编辑器的东西就用到iframe父子组件通信，可以直接在掘金搜索
- 注意：在新增数据的时候先将编辑器内容设为空
