1. 概述
富文本编辑器用于在系统中创建和编辑 二维码落地页 的正文内容。它提供了与 Word/WPS 类似的”所见即所得”编辑体验，让您可以像编辑文档一样自由组合文字、图片、表格、链接等内容。
1.1 适用场景
| 场景 | 推荐编辑器 |
|---|---|
| 快速编辑产品说明、活动文案、营养成分表等图文混排内容 | ✅ 富文本编辑器 |
| 制作精美营销活动页、自定义布局的页面 | ❌ 请使用「可视化拖拽编辑器」 |
1.2 编辑器入口
- 登录系统，进入 落地页管理 页面
- 点击 「+ 新建落地页」 或选择已有落地页的 「编辑」 操作
- 在第 1 步「选择编辑器」中选择 「富文本编辑器」
- 在第 2 步「选择二维码落地页模板」中选择模板（空白 / 内置 / 自定义）
- 进入第 3 步「编辑内容」，即可看到富文本编辑器界面
2. 界面总览
整个界面分为 左侧编辑面板（标题 + 编辑器）和 右侧设置面板（保存按钮 + 状态）。
3. 标题输入
在编辑器上方的输入框中输入落地页的标题。
- 标题将显示在管理列表、用户扫码页面顶部等位置
- 标题为 必填项，未填写时无法保存
- 建议使用简洁明了的标题，例如：
商品使用说明、活动详情
4. 工具栏功能详解
工具栏位于编辑器顶部，按功能分为以下几组：
4.1 文字格式组
| 按钮 | 功能 | 说明 |
|---|---|---|
| 标题下拉 | 设置段落为 H1 / H2 / H3 标题或正文 | 用于强调层级结构 |
| B | 粗体 | 选中文本后点击 |
| I | 斜体 | 选中文本后点击 |
| U | 下划线 | 选中文本后点击 |
| 颜色（”A”） | 设置文字颜色 | 支持调色板取色 |
| 背景色 | 设置文字背景高亮 | 适合突出关键字 |
| 清除格式 | 清除选中内容的格式 | 还原为默认正文样式 |
4.2 列表与引用组
| 按钮 | 功能 | 说明 |
|---|---|---|
| 项目符号列表 | 创建无序列表（•） | 用于并列罗列条目 |
| 编号列表 | 创建有序列表（1. 2. 3.） | 用于有顺序的步骤说明 |
| 引用 | 插入引用块（左侧竖线样式） | 用于引用注意事项、客户评价等 |
4.3 链接与图片组
| 按钮 | 功能 | 说明 |
|---|---|---|
| 链接 | 给选中文本插入超链接 | 输入 URL 即可 |
| 图片下拉 | 三种图片来源（详见 §6） | 网络图片 / 上传图片 / 媒体库 |
4.4 表格组
| 按钮 | 功能 |
|---|---|
| 插入表格 | 在光标位置插入一个 3×3 表格 |
| 删除表格 | 删除光标所在的整个表格 |
4.5 段落对齐组
| 按钮 | 功能 |
|---|---|
| 左对齐 | 段落靠左排列（默认） |
| 居中对齐 | 段落居中 |
| 右对齐 | 段落靠右 |
| 两端对齐 | 段落左右两端对齐（适合长段落） |
5. 编辑区域基础操作
5.1 文本输入
- 直接点击编辑区域，光标位置即可开始输入文字
- 按
Enter换行创建新段落，按Shift + Enter创建行内换行
5.2 选择文本
- 选中单词：双击文本
- 选中段落：三击段落
- 选中全文：
Ctrl + A（macOS:Cmd + A）
5.3 复制 / 粘贴 / 撤销
| 操作 | Windows 快捷键 | macOS 快捷键 |
|---|---|---|
| 复制 | Ctrl + C | Cmd + C |
| 粘贴 | Ctrl + V | Cmd + V |
| 剪切 | Ctrl + X | Cmd + X |
| 撤销 | Ctrl + Z | Cmd + Z |
| 重做 | Ctrl + Y / Ctrl + Shift + Z | Cmd + Shift + Z |
5.4 常用快捷键（编辑器内置）
| 快捷键 | 功能 |
|---|---|
Ctrl + B | 粗体 |
Ctrl + I | 斜体 |
Ctrl + U | 下划线 |
Ctrl + Shift + C | 复制格式 |
Ctrl + Shift + V | 粘贴为纯文本 |
💡 粘贴提示：从 Word / 网页复制内容时，建议先用记事本中转一次再粘贴到编辑器，可避免带入大量无关格式。
6. 插入图片（三种方式）
方式一：插入网络图片
适用于图片已托管在公网的情况。
- 将光标定位到需要插入图片的位置
- 点击工具栏 图片按钮 → 「网络图片」
- 在弹窗中输入图片 URL（如
https://example.com/photo.jpg） - 可选填写「图片描述」（alt 文字，用于无障碍阅读和 SEO）
- 点击 「插入」
方式二：上传本地图片
适用于一次性上传少量本地图片。
- 点击工具栏 图片按钮 → 「上传图片」
- 在文件选择框中选择本地图片（支持 JPG / PNG / GIF / WEBP）
- 图片会自动上传到服务器，插入到光标位置
方式三：从媒体库选择（推荐）
适用于已上传到媒体库的图片，可避免重复上传。
- 点击工具栏 图片按钮 → 「媒体库」
- 在弹窗中浏览已上传的图片（每页 24 张，支持滚动加载更多）
- 单击选中目标图片（右上角出现 ✓ 标记）
- 点击右下角 「插入图片」 按钮
💡 媒体库空状态：若媒体库暂无图片，会显示”暂无图片，请先在媒体库上传图片”提示。请前往 媒体库 页面完成上传后再回来操作。
6.1 图片编辑
插入图片后，单击图片可进行以下操作：
- 拖动四周控制点调整大小
- 点击图片工具栏修改替换、删除图片
- 通过工具栏「对齐」按钮设置图片与文字的环绕方式（需配合段落对齐）
7. 插入表格
7.1 创建表格
- 将光标移动到需要插入表格的位置
- 点击工具栏 「表格」按钮 → 「插入表格」
- 编辑器自动插入一个 3 行 × 3 列的空白表格
7.2 填写表格内容
- 直接在单元格中点击并输入文字
- 可使用
Tab键快速跳到下一个单元格 - 支持在每个单元格内独立设置字体、颜色、加粗等格式
7.3 删除表格
将光标移动到表格内的任意单元格，点击工具栏 「表格」按钮 → 「删除表格」，整个表格会被一次性删除。
8. 插入链接
- 在编辑器中选中需要添加链接的文字（必须先选中文本）
- 点击工具栏 「链接」 按钮
- 在弹窗中输入目标 URL（如
https://example.com/product） - 点击 「确定」
- 选中的文字将变为可点击的超链接
💡 用户扫码后点击链接会在新窗口打开。如需取消链接，将光标移到链接文字上，点击工具栏出现的 「取消链接」 按钮。