当前位置: 首页 > news >正文

UEditor 对接 秀米 手机编辑器流程与问题

最近老板 的新需求对接秀米 哈哈哈 正如我意,不断接受新需求才能快速成长
下面就是我在对接秀米过程中遇到的问题及解决办法

在这里插入图片描述
没错上面的小图标就是秀米入口

对接详细步骤

1. 下载并放置文件

  • 下载秀米插件包 这个目录的network下自取的 https://ent.xiumius.cn/ue/
  • 将这些文件放在UEditor 的目录下 【可以根据自身情况选择位置 最好都在ueditor目录下】
    在这里插入图片描述

2. 修改 UEditor 配置(也就是第一张图秀米入口那)

// ueditor.config.js 中修改以下配置
// 工具栏设置
toolbars: [// 其他按钮...'xiumi'  // 添加秀米按钮
],
,catchRemoteImageEnable: true //设置是否抓取远程图片
,catcherLocalDomain: ['xiumi.us', 'your-oss-domain.com'] //添加秀米域名到白名单(避免误抓)//白名单培配置 不然样式显示不出来
whiteList:{section:['class', 'style'],
}

3. 秀米文件配置修改

  • xiumi-ue-dialog-v5.html
    internal 引入路径注意
  • xiumi-ue-dialog-v5 .js内根据 xiumi-ue-dialog-v5.html 的实际位置引入
  iframeUrl: editor.ui.UEDITOR_HOME_URL + 'dialogs/xiumi-ue-dialog-v5.html',
  • xiumi-ue-v5.css 文件内注意引入logo的路径

4. 在使用富文本编辑器页面引入 秀米的css 和js

!!! 注意秀米的文件一定要在UEditor的js 下面引用
在这里插入图片描述

常见问题汇总

  • 导入过来的秀米内容 样式丢失 白名单设置
// ueditor.config,js //白名单培配置 不然样式显示不出来
whiteList:{section:['class', 'style'],
}
  • 秀米弹窗无法关闭
    检查 internal.js 是否加载成功,路径需与 HTML 文件同级1
  • 工具栏图标样式异常 在 ueditor.css 中手动添加秀米图标的 CSS 背景路径
  • 同步后光标位置错误 避免在 section 标签内插入内容,光标需在 div 或 p 中
  • Vue/React 中组件销毁报错 使用 vue-ueditor-wrap 时设置 :destroy=“true”

关键配置

  • 路径配置:iframeUrl、UEDITOR_HOME_URL 必须指向实际文件位置68;

  • 样式保留:修改 whitList.section 允许 class 和 style;

  • 图片转存:通过 catchRemoteImageEnable 或前端拦截实现;

  • 环境适配:Vue/React 项目需注意组件生命周期和静态资源存放位置(如 public/static)

http://www.dtcms.com/a/272447.html

相关文章:

  • ClickHouse 查看正在执行的SQL查询
  • Django--01基本请求与响应流程
  • go go go 出发咯 - go web开发入门系列(四) 数据库ORM框架集成与解读
  • selenium跳转到新页面时如何进行定位
  • 前缀和|差分
  • S7-1200 与 S7-300 PNS7-400 PN UDP 通信 TIA 相同项目
  • 缓存一致性问题(Cache Coherence Problem)是什么?
  • 使用Word/Excel管理需求的10个痛点及解决方案Perforce ALM
  • Word中字号与公式字体磅值(pt)的对应关系
  • 【AI智能体】智能音视频-通过关键词打断语音对话
  • RuoYi-Cloud ruoyi-gateway 网关模块
  • 海外盲盒系统:技术如何重构“信任经济”?
  • LLM 微调:从数据到部署的全流程实践与经验分享
  • 前端开发资源压缩与请求优化
  • FFmpeg滤镜相关的重要结构体
  • mongodbcdc脚本开发
  • 书生大模型实战营——1. 大语言模型原理与书生大模型提示词工程实践
  • 大数据学习7:Azkaban调度器
  • 记一次Android Studio编译报错:Execution failed for task ‘:app:compileDebugAidl‘
  • Redis数据类型之hash
  • Android 网络开发核心知识点
  • ICML 2025|快手提出了基于残差的超低码率图像压缩方法ResULIC
  • 【Bluedroid】蓝牙协议栈控制器能力解析与核心功能配置机制(decode_controller_support)
  • git中的fork指令解释
  • Linux - firewall 防火墙
  • 强缓存和协商缓存详解
  • 机器学习核心算法:PCA与K-Means解析
  • Java从入门到精通!第三天(数组)
  • Shell 中的重定向
  • C++实习面试题