前言:
在项目开发维护过程中,由于需要富文本编辑器,经过对比wangEidtor、quill等多个富文本编辑器,发现TinyMce富文本编辑器是最合适的,使用体验也是最好的;而且支持移动端的使用,支持响应式布局。
所以我在EuiAdmin开源项目中集成了Tinymce富文本编辑器。经过基本的配置,满足基础使用、且支持axios上传图片。
但是还是存在一个问题,那就是当Tinymce富文本编辑器在element-UI的dialog组件中使用,会出现段落、文本颜色等下拉框无法正常显示和使用,为开发增加了许多工作量,且不利于用户体验。
PC端使用效果:
![18354254667a6c3a27d9d4a5a3fb43ac.png](https://i-blog.csdnimg.cn/blog_migrate/26d1ec93fd5379c96546defb34a1ff3c.jpeg)
修改后在element-UI的dialog中使用:
![a6fc55b5b097b57a4ca85369457c7b74.png](https://i-blog.csdnimg.cn/blog_migrate/698c8a7a3ef7559d28efe637247f99c9.jpeg)
经修改无论全屏的dialog还是窗口的dialog都能正常使用。
原因:
开始以为是显示的加载顺序的问题,但是经过绑定切换加载顺序测试,发现和加载顺序