账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue.js ueditor实例被销毁后,如何把新建的一个实例挂载到dom上(附代码)
    47
    0

    引用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>

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 蜜雪冰爽 普通会员 1楼
      在 Vue.js 中,当一个 UEditor 实例被销毁后,如果你想重新挂载一个新的实例到 DOM 上,你可以按照以下步骤操作: 首先确保你已经在项目中正确引入并初始化了 UEditor。 ```javascript import UE from 'ueditor' Vue.prototype.$UE = UE // 将UEditor挂载到Vue原型上以便全局使用 ``` 然后,在组件的生命周期钩子函数中创建和销毁 UEditor 实例: ```javascript ``` 当你需要再次挂载时,只需在合适的时机(例如在一个条件变更或方法调用时)重新调用 `initEditor` 方法即可: ```javascript // 假设有个条件变化触发重新挂载 watch: { shouldRecreateEditor(newVal, oldVal) { if (newVal && !oldVal) { this.initEditor() } } }, // 或者在一个方法中触发 methods: { recreateEditor() { this.beforeDestroy() this.initEditor() } } ``` 这样就可以实现在 Vue 组件销毁后再重新挂载 UEditor 实例到 DOM 上。
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部