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）