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

最近老板 的新需求对接秀米 哈哈哈 正如我意,不断接受新需求才能快速成长

下面就是我在对接秀米过程中遇到的问题及解决办法

没错上面的小图标就是秀米入口

对接详细步骤

1. 下载并放置文件

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

javascript 复制代码
// 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 的实际位置引入
javascript 复制代码
  iframeUrl: editor.ui.UEDITOR_HOME_URL + 'dialogs/xiumi-ue-dialog-v5.html',
  • xiumi-ue-v5.css 文件内注意引入logo的路径

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

!!! 注意秀米的文件一定要在UEditor的js 下面引用

常见问题汇总

  • 导入过来的秀米内容 样式丢失 白名单设置
javascript 复制代码
// 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)

相关推荐
WSSWWWSSW12 小时前
vi/vim跳转到指定行命令
编辑器·vim·excel
月光有害13 小时前
PL-0功能拓展及基于VSCode的IDE配置
ide·vscode·编辑器
羚羊角uou1 天前
【Linux】编辑器vim和编译器gcc/g++
linux·运维·编辑器
embrace991 天前
【C语言学习】scanf函数
c语言·开发语言·汇编·学习·青少年编程·c#·编辑器
DechinPhy3 天前
VSCode手动版本更新
ide·vscode·编辑器
Sadsvit3 天前
Linux Vim 编辑器使用指南
linux·编辑器·vim
_别来无恙_3 天前
vscode 字体的跟换
ide·vscode·编辑器
死也不注释3 天前
【第四章自定义编辑器窗口_扩展默认的编辑器窗口_扩展Hierarchy窗口(8/11)】
unity·编辑器
叶子爱分享3 天前
VS Code编辑器
编辑器
LilySesy4 天前
【案例总结】幽灵单据——消失的交货单号
数据库·ai·oracle·编辑器·sap·abap