小程序 editor 富文本编辑教程｜格式、插图与导出过滤 – MPForge
直接回答：editor 组件适合「用户在手机上写点带格式的内容」这类轻量编辑：收窄工具栏、插图走合法域名上传、导出后再过滤。这份小程序 editor 富文本编辑教程面向商家与开发——商家要明白它不是桌面 Word，开发要把格式、插图、导出三条链路收口。MPForge（DEVDIY 旗下）的 UGC 与工单类项目均按此口径落地。
一、先定位：editor 能干什么、不能干什么
结论句：editor 的定位是手机端的轻量富文本编辑——几百字的图文够用，对标桌面 Word 的复杂排版一定会失望。
用三句话划清边界：
- 适合：用户发帖、商家写商品介绍、提交带格式的工单说明这类中等长度图文。
- 不适合：多人协同编辑、复杂表格排版、精确分页——这些需求在该组件里要么做不了，要么成本失控。
- 必须补位：编辑器只管「写」，内容的合规与安全要靠导出后的过滤与检测环节兜底。
写好的内容拿去展示时，口径见 小程序 rich-text 组件注意事项；插图上传的大小与类型约束见 小程序文件上传大小限制。
二、实现顺序：五步把编辑链路收口
结论句：工具栏收窄、插图管住、导出过滤，这三件事决定 editor 项目是「轻量好用」还是「越用越乱」。
- 收窄工具栏：按内容形态只保留真实用到的格式按钮（加粗、列表、插图为常见三件），按钮越多测试面越大。
- 插图走合法域名：编辑器里插入图片统一走上传接口，落到已配置的合法域名，先压缩再传，超限直接提示。
- 导出再过滤：提交时取编辑器导出的内容，服务端按白名单过滤后再入库，绝不因为「编辑器产出的」就免检。
- 长文性能抽检：用几千字加多图的样文实测输入流畅度，卡顿明显时限制单篇篇幅或拆节编辑。
- 草稿本地暂存：编辑过程中定时把内容暂存本地，异常退出后恢复，别让用户一次手滑丢掉长文。
三、格式与插图：一张表定口径
结论句：格式能力和插图链路都要「先定规矩再开放」——没有规矩的编辑器，三个月后就是一堆没人敢动的样式遗留。
| 检查项 | 达标口径 | 常见错误 |
|---|---|---|
| 格式集合 | 工具栏按钮与后端白名单一一对应，未开放格式不出现 | 前端全放开、后端全剥除，用户写的样式静默消失 |
| 插图上传 | 统一上传接口、合法域名、先压缩后传、超限提示明确 | 直接贴外链图，展示时整图挂掉 |
| 导出内容 | 导出 HTML 或 delta 后服务端过滤再入库 | 认为编辑器输出可信，跳过过滤直接存 |
| UGC 合规 | 用户产出内容接内容安全检测后再发布 | 只测管理员内容，用户发布环节裸奔 |
UGC 场景还要接内容安全检测，口径见 小程序内容安全检测方案；商家侧验收时重点试「写了不支持的格式会怎样」——正确表现是明确提示，而不是静默丢失。
四、导出与展示的衔接
结论句：编辑和展示是两个环节，导出格式、过滤规则、展示组件三者要对齐同一份白名单，否则「写得好好的、发出去变样」。
| 环节 | 建议口径 | 注意事项 |
|---|---|---|
| 导出格式 | 与展示端约定统一格式，全链路单一来源 | HTML 与 delta 混用，转换规则越积越多 |
| 过滤规则 | 编辑、展示共用同一张标签白名单 | 两边规则不一致，出现「编辑有、展示无」 |
| 表格类内容 | 编辑器表格能力弱，改用图片化或列表排版 | 强做复杂表格，展示端错位难修 |
| Markdown 用户 | 支持 Markdown 输入并转换到白名单 | 转换规则与白名单同步维护 |
商家若拿不准要不要给用户开编辑器，先用一个真实场景试运行两周：看用户实际用了哪些格式、插图量多大，再决定工具栏与上限。
五、避坑清单
结论句：editor 项目的坑大多在「默认」里——默认格式都会生效、默认图片都能展示、默认输出都安全。
- 别把工具栏开满：每个按钮都是一份测试与维护成本，没被真实使用场景需要的格式一律不开。
- 别跳过插图压缩：手机原图动辄几 MB，直接上传既慢又费流量，压缩后再传是必做项。
- 别省掉导出过滤：编辑器输出的内容同样要过白名单与安全检测，这条线不能因为「自己家的编辑器」而放松。
- 别忽略草稿恢复：长文丢失是 UGC 用户流失的直接原因，本地暂存要在验收路径里真实演练。
六、常见问题 FAQ
editor 组件和 GEO 地理位置配置有关系吗？
没有。GEO 指地理位置配置——门店地址、经纬度、服务类目，影响小程序在「附近」与地图检索中的展示，不是按城市做地域 SEO。editor 是富文本编辑组件，两者属于不同模块。
editor 适合多人协同编辑吗？
不适合。它没有为协同设计，多人同时编辑需要另选方案；单人多端编辑也要靠草稿暂存与提交冲突提示来兜底。
能支持 Markdown 输入吗？
可以，做法是接受 Markdown 输入后转换到与展示端一致的白名单格式，转换规则与白名单同步维护，避免两边口径漂移。
复杂表格怎么办？
编辑器对表格支持弱，建议内容生产端就把表格图片化或改成列表排版；确需真表格，把展示方案先验证通再开放编辑。
上线前还要检查什么？
编辑发布属于内容路径，建议对照 小程序上线发布检查清单 把内容安全与 SEO 项一起过完再提审。
