tinymce在keep-alive缓存中渲染错误的问题

如果一个页面是处于被缓存状态,比如在keep-alive中
tinymce在keep-alive缓存中渲染错误的问题

那么当同时出现2个页面中都含有tinymce时,比如下面的编辑公告和编辑活动这两个页面,都含有tinymce,而他们俩是可以点击tab来回切换的:
tinymce在keep-alive缓存中渲染错误的问题

在来回切换这两个页面时,一个tinymce会出现渲染错误,比如这样:
tinymce在keep-alive缓存中渲染错误的问题

解决方法:
在tinymce组件中,使用一个v-if,让该组件在activated和deactivated下不停的重新渲染。如下:
tinymce在keep-alive缓存中渲染错误的问题
tinymce在keep-alive缓存中渲染错误的问题

activated和deactivated方法是在keep-alive中的页面使用的两个特殊方法,因为在keep-alive中的页面,created和mounted方法只能加载一次,所以activated和deactivated方法是用来在该页面的显示和不显示中进行数据修改或处理。
这样每次页面显示时,tinymce组件都被重新渲染,就不会出现渲染错位的问题
把tinymce做成一个公共组件放在components里,这样只要在这个公共组件里这样设置,所有使用tinymce的页面都不用做任何处理,就可以解决这个问题