如果一个页面是处于被缓存状态,比如在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的页面都不用做任何处理,就可以解决这个问题

相关文章:

  • 2021-11-23
  • 2022-12-23
  • 2021-10-28
  • 2021-05-31
  • 2022-12-23
  • 2021-10-09
  • 2021-09-15
猜你喜欢
  • 2022-12-23
  • 2021-05-31
  • 2022-12-23
  • 2022-12-23
  • 2021-08-22
  • 2022-12-23
  • 2021-07-31
相关资源
相似解决方案