vue动态添加删除富⽂本（wangEditor）
关于动态删除wangeditor的数据不更新
如何使⽤wangeditor可以看我上⼀篇
在这个项⽬中需要富⽂本，并且还要动态添加删除，动态添加删除到是不困难，但是⽤到了删除富⽂本功能时页⾯数据不更新的问题，借鉴了中的思路，并⽤js实现。
思路
删除之前先，获取富⽂本⾥的所有内容，然后再删除指定内容，销毁富⽂本，再重新创建富⽂本，最后将获取的内容设置到富⽂本⾥。
动态添加删除富⽂本
<template>
<div>
<div v-for="(v, i) of box" :key="i">
<div :ref="v.ref"></div>
<el-button
icon="el-icon-minus"
@click="delbox(i)"
circle
></el-button>
</div>
<div ></div>
<el-button @click="crebox()">添加</el-button>
</div>
</template>
<script>
import E from "wangeditor";
export default {
data() {
return {
box: [
{
ref: "box",
editor: "editor",
},
]
,
num: 0,
};
},
methods: {
//删除
delbox(i) {
//先把所有富⽂本内容提出来
let arr = [];
for (let q = 0; q < this.box.length; q++) {
arr.push(this.box[q].html());
}
//在按下标删除
arr.splice(i, 1);
this.box = [];
//重新创建富⽂本
for (let w = 0; w < arr.length; w++) {
setTimeout(() => {
}, 15);
}
},
/
/添加
crebox(val) {
this.num++;
let ref = "box" + this.num;
this.box.push({
ref,
});
let box = this.box[this.box.length - 1];
setTimeout(() => {
box.editor = new E(this.$refs[ref]);
fig.height = 70;
ate();
if (val) {
html(val);
}
}, 10);
html富文本框},
},
mounted() {
this.box[0].editor = new E(this.$refs.box);    this.box[0].fig.height = 70;
this.box[0].ate();
},
};
</script>
最后就是获取富⽂本内容
for (let i = 0; i < this.box.length; i++) {
console.log(this.box[i].html());
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。