vue集成tinymce富文本

此文，将讲述一下我在vue中集成tinymce富文本时遇到的困难和解决途径（我只是搬运工）。

1.vue引入tinymce

大家可以参考文章：vue 2.0使用tinymce-vue富文本 - 掘金 (juejin.cn)

在此有可能会遇到一个问题，当我们的vue版本为2.0时，一定要选择低版本的tinymce和tinymce-vue，其他配置参考连接即可；

2.解决tinymce 不显示的问题

当我引入tinymce后，页面上只能看到一个div确无法显示，解决办法：

(37条消息) TinyMCE富文本编辑器都配置好了就是不显示的解决办法_龙冲的博客-CSDN博客_tinymce 不显示

3.解决tinymce在vue模态窗中显示时，被遮挡的问题

可算显示出来了，确发现，在选择字体、添加图片等操作的时候，看不到弹出内容。

后发现因为z-index的问题。解决办法如下（采用其中的办法2）：

(37条消息) TinyMce5富文本在Vue element UI的dialog中modal被遮挡的问题的两种解决办法_�小鹏⁶⁸的博客-CSDN博客

4.解决tinymce点击第二次无法显示数据的问题；

到这里，可以保存了，非常开心。

可与当我编辑的时候，确发现每第二次编辑，都无法展示和修改内容。

解决办法如下：

tinymce富文本第二次打开无内容 - 直角漫步 - 博客园 (cnblogs.com)

v-if的内容可以和模态窗的:visible.sync 公用一个变量。

到此，所有问题均已解决，可以下班了[撒花]。