vue2.0 ueditor组件化报错

Question

我两个页面都有ueditor编辑器，切换不同的页面会报cannot set property "setContent" of undefined 或者null
往编辑器输入的时候会报如图的那个错误，求解，谢谢！

ue.vue代码如下，老是报错，所以有些代码都被我注释掉了，搞得我够呛！
<template>

<div class="p-ueditor">
    <div ref="editorId"></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 {
data() {

return {
  editor: null,
  id: "editor" + new Date().getTime()
};

},
props: {

value: {
  type: String,
  default: null
},
config: {
  type: Object,
  default: {}
}

},
// watch: {
// value: function(val) {
// // UE.delEditor(this.id);
// // this.editor = UE.getEditor(this.id, this.config);
// // this.editor.ready(function(editor) {
// // setTimeout(function() {
// // editor = UE.getEditor(this.id, this.config);
// // editor.setContent(val);
// // }, 666);
// // });
// UE.getEditor(this.id, {
// onready: function() {
// //创建一个编辑器实例
// this.setContent(val, false);
// }
// });
// UE.getEditor(this.id); //返回刚创建的实例
// }
// },
watch: {

value: function value(val, oldVal) {
  // this.editor = UE.getEditor(this.id, this.config);
  // if (val !== null) {
  //   this.editor.setContent(val);
  // }
  this.editor = null;
  this.editor = UE.getEditor(this.id, this.config);
},
$route: {
  handler(newName, oldName) {
    // console.log("$route has changed");
    // console.log("UE.getEditor(this.id):", UE.getEditor(this.id));
    // //this.editor.destory();
    //UE.delEditor(this.id);
    //this.$refs.editorId.id = this.id; //创建动态id
    // //UE.delEditor(this.id);
    // this.editor = UE.getEditor(this.id, this.config);
    // this.editor = null; // UE.getEditor(this.id, this.config); //返回刚创建的实例
  },
  deep: true
}

},
methods: {

resetContent() {
  this.editor.setContent("");
}

},
beforeDestroy() {

console.log("beforeDestroy");
// 组件销毁的时候，要销毁 UEditor 实例
if (this.editor !== null && this.editor.destroy) {
  this.editor.destroy();
}

},

destroyed() {

console.log("destroyed...");
this.editor.destroy();

},
mounted() {

this.$refs.editorId.id = this.id; //创建动态id
this.editor = UE.getEditor(this.id, this.config);
if (this.value) {
  this.editor.ready(function() {
    this.editor.setContent(this.value);
  });
}
// this.$nextTick(function f1() {
//   // 保证 this.$el 已经插入文档
//   this.editor = null;
//   this.$refs.editorId.id = this.id; //创建动态id
//   this.editor = UE.getEditor(this.id, this.config);
//   this.editor.ready(
//     function f2() {
//       console.log("bind this:", this);
//       this.editor.addListener(
//         "contentChange",
//         function() {
//           const wordCount = this.editor.getContentLength(true);
//           const content = this.editor.getContent();
//           const plainTxt = this.editor.getPlainTxt();
//           const htmlCont = this.editor.getAllHtml();
//           // 编辑器内容有变动,通知父组件
//           this.$emit("input", {
//             wordCount: wordCount,
//             content: content,
//             plainTxt: plainTxt,
//             htmlCont: htmlCont
//           });
//         }.bind(this)
//       );
//       // editor初始化后操作
//       this.$emit("ready", this.editor);
//       this.editor.setContent(this.value);
//     }.bind(this)
//   );
// });

}
};
</script>

Answer 1

是autoSave引起的，当输入之后，编辑器还没提示本地已保存就跳转页面，就会提示各种null的错误，把ueditor.all.js中的autoSave修改一下就好了

Answer 2

ueditor毕竟不是专为VUE适配的，以前遇到过问题，是ueditor和vue里js代码执行顺序导致的，可以通过ueditor的ready函数控制下vue里对应组件的渲染和执行