- 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 上。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
