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）