前言：

在项目开发维护过程中，由于需要富文本编辑器，经过对比wangEidtor、quill等多个富文本编辑器，发现TinyMce富文本编辑器是最合适的，使用体验也是最好的；而且支持移动端的使用，支持响应式布局。

所以我在EuiAdmin开源项目中集成了Tinymce富文本编辑器。经过基本的配置，满足基础使用、且支持axios上传图片。

但是还是存在一个问题，那就是当Tinymce富文本编辑器在element-UI的dialog组件中使用，会出现段落、文本颜色等下拉框无法正常显示和使用，为开发增加了许多工作量，且不利于用户体验。

PC端使用效果：

修改后在element-UI的dialog中使用：

经修改无论全屏的dialog还是窗口的dialog都能正常使用。

原因：

开始以为是显示的加载顺序的问题，但是经过绑定切换加载顺序测试，发现和加载顺序没有任何关系，切换加载顺序无法解决下拉框问题。

经过试验和查询发现原因是element-UI的dialog层级大于Tinymce富文本编辑器下拉框的层级；所以导致下拉框点击显示时层级是小于dialog的层级，显示在dialog的后面，导致无法正常显示所以无法正常操作。

解决方法：

解决思路非常简单，只需要将Tinymce富文本层级调高，即Tinymce的css文件位于根目录："node_modules/tinymce/ui/oxide/skin.css"文件中，将里面的z-index的值全部调整为9999即可正常显示，如果你有时间可以逐一修改进行测试。

存在的问题：

1、调整层级文件仅影响本地内容，采用cdn加载的话还是不生效的，所以意味着你不能通过cdn引入tinymce的文件。

2、由于不能通过cdn会导致在你网站在要使用到tinymce富文本组件的地方加载时间好事较长。

结语：

喜欢可以关注、收藏、评论一波，长期更新开发冷知识，如果你需要源码；可以前往euiadmin.com下载euiadmin开源项目源码压缩包，解压后进行查看。