tinymce在keep-alive缓存中渲染错误的问题
如果一个页面是处于被缓存状态,比如在keep-alive中
那么当同时出现2个页面中都含有tinymce时,比如下面的编辑公告和编辑活动这两个页面,都含有tinymce,而他们俩是可以点击tab来回切换的:
在来回切换这两个页面时,一个tinymce会出现渲染错误,比如这样:
解决方法:
在tinymce组件中,使用一个v-if,让该组件在activated和deactivated下不停的重新渲染。如下:
activated和deactivated方法是在keep-alive中的页面使用的两个特殊方法,因为在keep-alive中的页面,created和mounted方法只能加载一次,所以activated和deactivated方法是用来在该页面的显示和不显示中进行数据修改或处理。
这样每次页面显示时,tinymce组件都被重新渲染,就不会出现渲染错位的问题
把tinymce做成一个公共组件放在components里,这样只要在这个公共组件里这样设置,所有使用tinymce的页面都不用做任何处理,就可以解决这个问题