tinymce移动端使用_一招解决Tinymce在el-dialog中下拉框使用异常

本文介绍了在移动端项目中使用TinyMce富文本编辑器遇到的下拉框显示异常问题,详细分析了原因——Element-UI Dialog的层级高于Tinymce的下拉框。提出了解决方案,即通过修改Tinymce的CSS文件提高其层级。同时指出此方法仅适用于本地内容,使用CDN加载时无效,并可能导致加载时间增加。
摘要由CSDN通过智能技术生成

前言:

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

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

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

PC端使用效果:

18354254667a6c3a27d9d4a5a3fb43ac.png

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

a6fc55b5b097b57a4ca85369457c7b74.png

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

原因:

开始以为是显示的加载顺序的问题,但是经过绑定切换加载顺序测试,发现和加载顺序

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值