文章编辑器使用指南

简介

LikeDo 的富文本编辑器（基于 TipTap）提供了完整的内容创作工具。无论您是撰写技术文档、博客文章还是笔记，都能找到所需的格式化功能。

基础文本格式

文本样式

使用工具栏按钮或快捷键快速格式化文本：

• 粗体: 点击工具栏中的 B 按钮或使用 Cmd+B (Mac) / Ctrl+B (Windows)
• 斜体: 点击 I 按钮或使用 Cmd+I / Ctrl+I
• 删除线: 点击 S 按钮或使用 Cmd+Shift+X / Ctrl+Shift+X
• 下划线: 点击 U 按钮或使用 Cmd+U / Ctrl+U
• 行内代码: 点击 </> 按钮或使用 Cmd+E / Ctrl+E

文本颜色与高亮

1. 文本颜色: 选中文本后，点击调色板图标 🎨，选择您想要的文字颜色
2. 高亮背景: 点击高亮图标 🖍️，为文本添加彩色背景
   • 支持多种颜色选择
   • 可以为不同内容使用不同的高亮颜色

上标和下标

• 上标: 用于数学公式或脚注，如 x²
• 下标: 用于化学式，如 H₂O

标题与段落

设置标题层级

点击工具栏的标题下拉菜单，选择 H1-H4 级别的标题：

• H1: 最高级别标题，用于文章标题
• H2: 主要章节标题
• H3: 次级章节标题
• H4: 三级章节标题

文本对齐

提供四种对齐方式：

• 左对齐: 默认对齐方式
• 居中对齐: 适合标题或重要内容
• 右对齐: 用于特殊排版需求
• 两端对齐: 让段落两端对齐，更加整齐

列表功能

三种列表类型

1. 无序列表: 用于不分先后顺序的项目

   • 点击工具栏的列表图标
   • 选择无序列表（圆点）
   • 按 Enter 添加新项目
   • 按 Tab 创建子列表

2. 有序列表: 用于有顺序的步骤或项目

   1. 选择有序列表（数字）
   2. 自动编号
   3. 支持嵌套

3. 任务列表: 管理待办事项

   • 未完成任务
   • 已完成任务
   • 点击复选框即可切换状态

引用与代码

引用块

创建优雅的引用内容：

点击工具栏的引号图标 📝 即可创建。

代码块

支持语法高亮的代码块：

// 支持多种编程语言的语法高亮
function hello() {
  console.log('Hello, World!');
}

使用方法:

1. 点击工具栏的代码块图标 {}
2. 默认使用 JavaScript 语法高亮
3. 粘贴或输入您的代码
4. 支持常见编程语言（JavaScript、Python、TypeScript、Go、Rust 等）

代码沙盒

交互式 JavaScript 代码执行环境，支持实时预览：

// 在这里输入您的 JavaScript 代码
const greeting = 'Hello, World!';
console.log(greeting);

使用方法:

1. 点击工具栏的 Sandbox 图标 ▶️，或使用斜杠命令 /sandbox
2. 在编辑区域编写 JavaScript 代码
3. 点击 Run 按钮执行代码
4. 在下方面板查看输出结果

功能特性:

• 实时代码执行
• 控制台输出显示（log、error、warn、info）
• 错误处理与调试
• 代码编辑器带语法高亮
• 适合代码示例和教程

使用场景:

• 交互式代码演示
• 编程概念教学
• 测试代码片段
• 创建交互式教程

提示块

创建醒目的提示块来突出重要信息。提供四种类型：

信息提示块（蓝色）

用于一般信息和提示：

• 技术说明
• 附加解释
• 实用提示

警告提示块（黄色）

用于警告和注意事项：

• 重要通知
• 潜在风险
• 需要注意的事项

成功提示块（绿色）

用于成功消息和建议：

• 最佳实践
• 推荐方法
• 正面结果

错误提示块（红色）

用于错误和关键信息：

• 重要警告
• 安全问题
• 关键问题

使用方法:

1. 在编辑器中输入 /callout 查看所有提示块类型，或使用：
   • /info - 信息提示块
   • /warning - 警告提示块
   • /success - 成功提示块
   • /error - 错误提示块
2. 输入您的内容
3. 提示块支持所有富文本格式

使用示例:

• 文档说明
• 教程警告
• 分步指南
• 技术规格

图片插入

两种插入方式

方式一：拖放上传

• 直接将图片文件拖入编辑器
• 支持一次上传多张（最多 3 张）
• 自动上传到云端

方式二：URL 图片

1. 点击工具栏的图片 URL 图标 🔗
2. 粘贴图片 URL 地址
3. 点击确认

图片编辑

• 调整大小: 点击图片后拖动边角调整尺寸
• 删除图片: 选中图片后按 Delete 或 Backspace

表格功能

创建表格

1. 点击工具栏的表格图标 📊
2. 选择"插入表格"
3. 编辑器会插入一个 3x3 的默认表格

表格操作

添加行/列:

• 点击表格单元格
• 使用斜杠命令 / 查看表格相关操作
• 选择"添加行"或"添加列"

删除行/列:

• 选中要删除的行或列
• 使用斜杠命令选择删除操作

合并单元格:

• 选中多个单元格
• 使用合并功能创建更复杂的表格布局

调整列宽:

• 鼠标悬停在列边界
• 拖动调整列宽

折叠块 (Details)

创建可展开/折叠的内容块，适合隐藏长篇内容或提供额外信息。

使用方法:

1. 点击工具栏的折叠块图标 ⮟
2. 输入摘要标题（始终可见）
3. 在下方输入详细内容（可折叠）
4. 点击摘要可展开/折叠内容

适用场景:

• FAQ 问答
• 长篇代码示例
• 详细技术说明
• 补充参考资料

超链接

添加链接

1. 选中要添加链接的文字
2. 点击工具栏的链接图标 🔗
3. 输入 URL 地址
4. 可选：勾选"在新标签页打开"

编辑或删除链接

• 点击已有链接，会显示编辑选项
• 可以修改 URL 或删除链接

表情符号

点击工具栏的 Emoji 图标 😊，从表情选择器中快速插入表情符号。

• 支持搜索功能
• 包含所有标准 Unicode 表情
• 一键插入

AI 辅助功能

AI 功能菜单

点击工具栏的 ✨ AI 按钮，可使用以下智能功能：

1. 续写

让 AI 根据当前内容继续写作，适合：

• 克服写作障碍
• 扩展思路
• 完成未完成的句子

2. 改写

选中一段文字，AI 会用不同的方式重新表达，帮助：

• 优化表达
• 调整语气
• 改善可读性

3. 生成大纲

为您的内容自动生成结构化大纲：

• 自动识别主题
• 建议章节结构
• 理清思路

4. 生成摘要

为长篇文章创建简洁摘要：

• 摘要会插入到文档开头
• 保留原有内容
• 快速了解文章要点

5. 翻译

支持 10 种语言的智能翻译：

• 英语 (English)
• 中文 (Chinese)
• 日语 (Japanese)
• 韩语 (Korean)
• 法语 (French)
• 德语 (German)
• 西班牙语 (Spanish)
• 葡萄牙语 (Portuguese)
• 俄语 (Russian)
• 阿拉伯语 (Arabic)

使用技巧:

• 选中部分文字：仅翻译选中内容
• 未选中文字：翻译整篇文章

6. 自定义提示词

输入您自己的指令，让 AI 执行特定任务，例如：

• "把这段话改成更专业的语气"
• "为这篇文章添加一个引人入胜的开头"
• "将技术术语解释得更通俗易懂"

文章内链

插入文章链接

点击工具栏的 🔗 插入文章链接 按钮：

1. 搜索您要链接的文章标题
2. 从列表中选择文章
3. 自动插入格式为 [[文章标题|文章ID]] 的内部链接

优势:

• 自动维护链接关系
• 文章更新时链接不会失效
• 方便构建知识网络

斜杠命令

在编辑器中输入 / 可快速调用各种功能：

常用命令:

• /h1 - /h4: 快速插入标题
• /ul: 无序列表
• /ol: 有序列表
• /task: 任务列表
• /quote: 引用块
• /code: 代码块
• /sandbox: 代码沙盒
• /image: 插入图片
• /table: 插入表格
• /details: 折叠块
• /hr: 水平分割线

提示块命令:

• /callout: 查看所有提示块类型
• /info: 信息提示块
• /warning: 警告提示块
• /success: 成功提示块
• /error: 错误提示块

AI 命令:

• /continue: AI 续写
• /rewrite: AI 改写
• /outline: 生成大纲
• /summary: 生成摘要
• /translate: 翻译

Markdown 源码编辑

在富文本和 Markdown 源代码编辑模式之间无缝切换，实现最大灵活性。

功能特性

双向同步: 在富文本和 Markdown 之间无缝转换：

• 富文本 → Markdown: 将格式化内容导出为 Markdown
• Markdown → 富文本: 即时导入并渲染 Markdown

标准 Markdown 支持:

• 标题 (# ## ###)
• 粗体/斜体 (**粗体** *斜体*)
• 列表（有序和无序）
• 代码块 (```)
• 链接 ([文本](url))
• 图片 (![alt](url))
• 引用块 (>)
• 表格
• 任务列表 (- [ ])

使用方法

1. 点击工具栏的 MD 图标（Markdown 符号）
2. 编辑器切换到 Markdown 源码编辑模式
3. 使用标准 Markdown 语法编辑
4. 再次点击 MD 按钮返回富文本模式
5. 您的 Markdown 将自动转换为格式化内容

快速切换: 使用键盘快捷键 Cmd+Shift+C / Ctrl+Shift+C

使用场景

何时使用 Markdown 模式:

• 快速文本输入，无需鼠标
• 从其他来源复制/粘贴 Markdown
• 精确控制格式
• 使用查找替换批量编辑
• 处理技术文档

何时使用富文本模式:

• 所见即所得的编辑体验
• 处理图片和表格
• 可视化格式需求
• 协作编辑
• 内容预览

键盘快捷键

常用快捷键

段落快捷键

实用技巧

1. 快速格式化

先输入内容，然后选中文字再应用格式，比边输入边格式化更高效。

2. Markdown 支持

编辑器支持部分 Markdown 语法，例如：

• 输入 **文字** 会自动转为粗体
• 输入 *文字* 会自动转为斜体
• 输入 - 开始无序列表
• 输入 1. 开始有序列表
• 输入 [] 或 [ ] 创建任务列表

3. 撤销与重做

不要怕犯错！使用 Cmd+Z / Ctrl+Z 可以撤销任何操作，Cmd+Shift+Z / Ctrl+Shift+Z 可以重做。

4. 清空内容

点击工具栏最右侧的橡皮擦图标可以一键清空编辑器所有内容。

5. 字符统计

编辑器右下角会实时显示字符数统计，帮助您控制文章长度。

6. 自动保存

编辑器会自动保存您的内容，无需担心数据丢失。

移动端使用

在移动设备上，编辑器工具栏会自动适配：

• 点击高亮和链接按钮会切换到专门的编辑视图
• 使用返回箭头切换回主工具栏
• 长按文字可选中并应用格式
• 支持所有主要功能

常见问题

Q: 为什么某些格式没有应用？

A: 确保您已选中要格式化的文字。大多数格式需要先选中文本才能应用。

Q: 如何删除表格？

A: 点击表格，使用斜杠命令 / 搜索"删除表格"，或直接选中整个表格后按 Delete。

Q: AI 功能提示"不可用"？

A: AI 功能需要消耗 Credits。请检查您的账户余额或订阅状态。

Q: 图片上传失败？

A: 请确保图片不超过 10MB，且格式为 JPG、PNG 或 GIF。

Q: 如何导出内容？

A: 编辑器内容会自动保存。您可以在文章管理页面进行导出操作。