当前位置：网站首页 > 技术教程 > 正文

一招解决Tinymce在el-dialog中下拉框使用异常

suiw9 2024-10-25 17:00 29 浏览 0 评论

前言：

在项目开发维护过程中，由于需要富文本编辑器，经过对比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开源项目源码压缩包，解压后进行查看。

tinyeditor

一招解决Tinymce在el-dialog中下拉框使用异常

前言：

原因：

解决方法：

存在的问题：

结语：

相关推荐

取消回复欢迎你发表评论:

Linux:Ubuntu22.04上安装python3.11，简单易上手

宝马阿布达比分公司推出独特M4升级套件，整套升级约在20万

MATLAB中图片保存的五种方法(一)（matlab中保存图片命令）

别再傻傻搞不清楚Workstation Player和Workstation Pro的区别了

Linux上使用tinyproxy快速搭建HTTP/HTTPS代理器

如何提取、修改、强刷A卡bios a卡刷bios工具

Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框

日本组合“岚”将于2020年12月31日停止团体活动

SpringCloud OpenFeign 使用 okhttp 发送 HTTP 请求与 HTTP/2 探索

tinymce 号称富文本编辑器世界第一，大家同意么?

一招解决Tinymce在el-dialog中下拉框使用异常

前言：

原因：

解决方法：

存在的问题：

结语：

相关推荐

取消回复欢迎 你 发表评论:

Linux:Ubuntu22.04上安装python3.11，简单易上手

宝马阿布达比分公司推出独特M4升级套件，整套升级约在20万

MATLAB中图片保存的五种方法(一)（matlab中保存图片命令）

别再傻傻搞不清楚Workstation Player和Workstation Pro的区别了

Linux上使用tinyproxy快速搭建HTTP/HTTPS代理器

如何提取、修改、强刷A卡bios a卡刷bios工具

Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框

日本组合“岚”将于2020年12月31日停止团体活动

SpringCloud OpenFeign 使用 okhttp 发送 HTTP 请求与 HTTP/2 探索

tinymce 号称富文本编辑器世界第一，大家同意么?

取消回复欢迎你发表评论: