tinymce 富文本编辑器在多个路由页面切换时不渲染内容且不能编辑要刷新才能正常显示解决方案

最新推荐文章于 2024-01-04 10:55:03 发布

原创最新推荐文章于 2024-01-04 10:55:03 发布 · 3.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #编辑器

在Vue后台系统中，由于使用了keep-alive路由切换功能，导致tinymce编辑器在首次加载时无法正确渲染内容且不可编辑。通过给编辑器添加key属性，并在beforeDestroy和activated钩子函数中分别销毁和更新key值，成功解决了这个问题。每次切换路由时，编辑器将重新加载，确保内容的正常显示和编辑。

因为做的后台系统做了切换路由功能，使每个路由都keep-alive，使用tinymce编辑器时总是第一次打开渲染不出内容而且不能编辑，都要刷新下才能正常显示和编辑，百度找了许多方法，试了一遍后找到了对我的项目有效的办法：
首先就是给编辑器加上个key，

<tinymce-editor :init="init" v-model="form.container" id="tinymce" :key="tinymceFlag"></tinymce-editor>

data() {
return {
tinymceFlag: 1,//是防止组件缓存导致编辑器不能正常使用，每次切换来都更改key,使其重新渲染
}
...
}
beforeDestroy() {
// 销毁组件前销毁编辑器
this.tinymce && this.tinymce.destroy();
},
activated() {
// 每次都给编辑器改变不同的key值使其每次切换页面都重新加载
this.tinymceFlag++;
},

总结：就是给编辑器加上个key