vue.js ueditor实例被销毁后,如何把新建的一个实例挂载到dom上(附代码)

引用ueditor组件,然后跳转到其他页面的时候,ueditor并没有挂载到dom上,求解!谢谢
<template>

<div>
    <div :id="this.id"></div>
</div>

</template>

<script>
import "../../../../static/UE/ueditor.config.js";
import "../../../../static/UE/ueditor.all.js";
import "../../../../static/UE/ueditor.parse.js";
import "../../../../static/UE/lang/zh-cn/zh-cn.js";
export default {
name: "editor",
props: ["id"],
data() {

return {
  ue: "", //ueditor实例
  content: "" //编辑器内容
};

},
methods: {

//初始化编辑器
initEditor() {
  this.ue = UE.getEditor(this.id, {
    initialFrameWidth: 1000,
    initialFrameHeight: 350,
    scaleEnabled: false,
    enableAutoSave: false
    //initialFrameWidth: null,
    //initialFrameHeight: 400
  });
  //编辑器准备就绪后会触发该事件
  this.ue.addListener("ready", () => {
    //设置可以编辑
    this.ue.setEnabled();
  });
  //编辑器内容修改时
  this.selectionchange();
},
//编辑器内容修改时
selectionchange() {
  this.ue.addListener("selectionchange", () => {
    this.content = this.ue.getContent();
  });
}

},
activated() {

//初始化编辑器
console.log("this.$el:", this.$el);
console.log("this.$el.childElementCount:", this.$el.childElementCount);
console.log("activated........");
console.log("初始化前。。。");
// UE.delEditor(this.id);
// this.ue = UE.getEditor(this.id, this.config);
this.initEditor();
console.log("初始化后。。。");

},
deactivated() {

console.log("deactivated........");
//销毁编辑器实例,使用textarea代替
this.ue.destroy();
//重置编辑器,可用来做多个tab使用同一个编辑器实例
//如果要使用同一个实例,请注释destroy()方法
//this.ue.reset();

},
mounted() {

//  this.initEditor();
//UE.delEditor(this.id);
console.log("mounted...");
// UE.delEditor(this.id);
// this.ue = UE.getEditor(this.id, this.config);

},
created() {

console.log("created...");

}
};
</script>

<style>
</style>

阅读 2.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏