公众号图文编辑器
内置样式库的富文本编辑器，点击即插入标题样式、图文组件、分隔符，完成后一键同步到微信草稿箱，无需手写 HTML。
微信公众号原生的图文编辑器排版能力有限，标题只有黑色加粗、正文样式单一，无法做出有层次感的视觉效果。公众号图文编辑器通过内置样式库解决这个问题：左侧选择标题样式、分隔符、图文组件、关注引导等预制样式，点击后直接插入编辑区，在编辑器内拼装成完整图文内容；完成后同步为微信草稿箱，或复制全文粘贴到微信公众平台编辑器。整个过程无需手写 HTML，也无需切换到第三方排版工具再复制。
典型使用场景
场景：推文撰写人在编辑器中先插入一个彩色底纹的标题样式，写入本期活动主题；下方插入「图文混排」组件填入产品图和说明文字；段落之间点一下「分隔符」样式拉开视觉节奏；文末插入「关注引导」组件。30 分钟后点击「同步到草稿箱」，封面图和标题填写后直接在微信公众平台发布，文章样式与在编辑器中看到的一致。
一、页面布局
进入「公众号图文编辑器」后，页面分为左右两区：
| 区域 | 内容 |
|---|---|
| 左侧：样式库 | 分类展示可插入的样式组件，支持搜索、收藏、滚动加载 |
| 右侧：编辑区 | 基于 UEditor 的富文本编辑器，上方有格式工具栏，下方有功能操作栏 |
二、样式库
样式分类
样式库顶部有五个分类标签：
| 分类 | 内容说明 |
|---|---|
| 标题 | 各种装饰性标题，含底色、边框、图标前缀等风格 |
| 正文 | 正文段落样式，含引用块、首字母大写、多栏排版等 |
| 图文 | 图文混排组件，含左图右文、右图左文、图片配文字说明等 |
| 关注 | 引导读者关注公众号的组件，可放置在文章末尾 |
| 分隔符 | 段落之间的视觉分隔线，含线条、点阵、图案等多种风格 |
使用样式
点击样式库中的任意样式卡片，该样式的 HTML 代码即以插入模式注入编辑区光标所在位置。若编辑区为空，样式插入到文档末尾。
搜索与收藏
- 搜索：在样式库顶部输入关键词，按名称实时过滤样式列表
- 收藏：点击样式卡片右上角的收藏图标，将常用样式加入「已收藏」分组；点击筛选栏中的「收藏」按钮，切换为仅显示已收藏样式
- 样式列表支持无限滚动加载，首次加载 20 条，滚动到底部自动加载更多
三、编辑区
格式工具栏
编辑区顶部提供常用富文本格式操作：
| 工具 | 说明 |
|---|---|
| 撤销 / 重做 | 逐步撤销或恢复操作 |
| 字体大小 | 设置选中文字的字号 |
| 引用块 | 将选中段落设为引用样式（灰色背景缩进） |
| 分隔线 | 插入横向分隔线 |
| 清除格式 | 移除选中文字的所有格式，还原为纯文本 |
| 格式刷 | 复制选中文字的格式，粘贴到其他文字 |
| 链接 / 取消链接 | 为选中文字添加或移除超链接 |
| 粗体 / 斜体 / 下划线 | 基础字体样式 |
| 文字颜色 / 背景色 | 字体颜色与高亮背景 |
| 首行缩进 | 设置段落缩进 |
| 对齐方式 | 左对齐 / 居中 / 右对齐 / 两端对齐 |
| 段落间距 | 调整段落上方/下方的间距 |
| 行高 | 调整行间距 |
| 有序 / 无序列表 | 插入编号列表或项目符号列表 |
| 图片对齐 | 选中图片后，设置图片在文中的对齐方式 |
插入图片
点击编辑区功能栏的「插入图片」按钮，弹出图片选择器，可从素材库选取或上传新图片；图片插入后可在编辑区内拖动调整大小。
插入小程序链接
点击「插入小程序」，填入小程序 AppID、路径和展示文字，插入后以行内链接形式显示，粉丝在微信中打开文章时可直接跳转到小程序。
样式块浮动工具栏
从样式库插入的每个样式组件在编辑区中是一个独立的「样式块（HostEditor）」。点击样式块时，该块高亮并弹出浮动工具栏：
| 按钮 | 说明 |
|---|---|
| 复制 | 将该样式块的富文本复制到剪贴板 |
| 剪切 | 复制到剪贴板后从文档中删除 |
| 删除 | 直接删除该样式块 |
| 选中 | 在编辑器中选中该样式块内的所有文字，便于批量修改文字格式 |
| 上移 / 下移 | 将该样式块与相邻块交换位置，调整文章段落顺序 |
| 前插入空行 | 在该样式块上方插入一个空段落 |
| 后插入空行 | 在该样式块下方插入一个空段落 |
点击图片时，弹出「替换图片」按钮，可直接将图片替换为素材库中的其他图片，无需删除后重新插入。
四、功能操作栏
编辑区下方的操作栏提供以下功能：
预览
点击「预览」，弹出手机框架样式的预览面板，展示文章在微信手机客户端中的实际效果（字体、图片、分隔符等样式均按微信渲染规则显示）。点击预览面板外的遮罩区域关闭预览。
复制全文
点击「复制全文」，系统将整篇文章的完整 HTML 复制到剪贴板，弹出提示「全文内容已成功复制，请粘贴到微信公众平台编辑器或其他编辑器内使用」。
用途：不使用「同步到草稿箱」，而是直接在微信公众平台后台的图文编辑器中粘贴富文本，保留所有样式，替代从 Word 或其他工具导入内容时样式丢失的问题。
同步到草稿箱
点击「同步到草稿箱」，打开配置抽屉，填写：
| 字段 | 必填 | 说明 |
|---|---|---|
| 文章标题 | 是 | 公众号图文消息的标题 |
| 作者 | 否 | 作者署名，显示在文章顶部标题下方 |
| 封面图 | 是 | 文章列表和转发卡片的封面图；从素材库选取永久素材 |
提交前，系统会自动扫描文章内所有图片 URL（含 background-image），将非微信 CDN 的图片重新上传到微信服务器，替换为微信 CDN 地址，避免文章发布后因防盗链导致图片无法显示。
提交成功后，文章进入微信公众平台草稿箱，登录微信公众平台后台即可找到该草稿，审核后发布。
清空内容
点击「清空」，确认后清除编辑器内所有内容，页面刷新。操作不可撤销，清空前建议先复制全文或同步到草稿箱备份。
五、内容自动保存
编辑区的内容每次修改后自动保存到浏览器本地缓存（有效期 24 小时）。关闭标签页或意外刷新后，重新进入编辑器，上次编辑的内容会自动恢复到编辑区，无需重新粘贴。
六、与其他推送方式的配合
公众号图文编辑器负责内容制作，制作完成后与以下功能配合完成发布和触达：
| 场景 | 操作路径 |
|---|---|
| 正式推文 | 同步到草稿箱 → 微信公众平台 → 发布图文消息 |
| 定向推送 | 复制全文 → 粘贴到微信公众平台图文编辑器 → 发布后，在「图文群发」中选择该图文，按标签定向发送 |
| 生成落地页 | 将文章内容改为 H5 图文（功能独立），放入菜单按钮或模板消息跳转链接 |
常见问题
Q：从样式库插入的样式，文字怎么修改？
A：直接在编辑区点击样式块内的文字，即可定位光标进行编辑，文字修改不影响样式本身的布局和装饰效果。如需批量修改文字格式（如字体颜色），点击该样式块弹出浮动工具栏，点「选中」选中全部内容，再用格式工具栏统一修改。
Q：样式库里没有我需要的样式，能自定义吗？
A：样式库中的样式由平台统一维护，用户不能自行添加新样式类型。若现有样式不满足需求，可在插入后在编辑区内手动调整样式块内的文字内容和格式。
Q：同步到草稿箱后，封面图在哪里上传？
A：点击「同步到草稿箱」弹出配置抽屉后，封面图字段支持从永久素材库中选取（需提前在微信公众平台或素材管理模块上传过永久素材）。临时上传的图片不能作为封面图，因为微信要求封面图的 thumb_media_id 必须是永久素材。
Q：草稿箱同步成功后，在哪里查找草稿？
A：登录微信公众平台（mp.weixin.qq.com）→「图文消息」→「草稿箱」，找到刚同步的文章，预览确认后点击「群发」按钮发布。
Q：复制全文粘贴到微信公众平台后样式丢失了怎么办？
A：部分浏览器或粘贴方式（如 Ctrl+Shift+V 纯文本粘贴）会剥离 HTML 格式，建议使用 Ctrl+V 粘贴，确保是富文本而非纯文本粘贴。另外，不同浏览器对剪贴板 HTML 格式的支持有差异，推荐使用 Chrome 浏览器。
Q：内容自动保存有什么限制？
A：自动保存存储在浏览器本地缓存（Session Storage），有效期 24 小时。如果清除浏览器缓存或在另一台电脑上打开，缓存内容不会同步。重要的长篇内容建议及时点击「同步到草稿箱」或「复制全文」保留备份。
