编辑器使用指南

DocCollab提供了功能丰富的富文本编辑器，基于Slate.js框架开发，支持多种格式化选项和协同编辑功能。

编辑器界面

编辑器界面主要由以下部分组成：

• 顶部工具栏：包含各种格式化按钮和操作选项
• 编辑区域：文档内容的主要编辑区域
• 悬浮工具栏：选中文本时显示的格式化工具栏
• 用户头像：显示当前正在编辑文档的用户列表
• 状态指示器：显示连接状态和同步状态

基本操作

文本格式化

可以使用以下方式格式化文本：

1. 选择文本并使用工具栏按钮：

   • 加粗：点击"B"按钮
   • 斜体：点击"I"按钮
   • 下划线：点击"U"按钮
   • 删除线：点击"S"按钮

2. 使用快捷键：

   • 加粗：Ctrl+B 或 Cmd+B
   • 斜体：Ctrl+I 或 Cmd+I
   • 下划线：Ctrl+U 或 Cmd+U
   • 删除线：Ctrl+Shift+X 或 Cmd+Shift+X
   • 代码：Ctrl+`` 或 Cmd+``

段落格式

编辑器支持以下段落格式：

• 标题：工具栏中选择H1-H6
• 列表：
  • 无序列表：点击工具栏中的项目符号按钮
  • 有序列表：点击工具栏中的数字列表按钮
• 引用：点击工具栏中的引用按钮
• 代码块：点击工具栏中的代码块按钮

代码块

代码块功能支持多种编程语言的语法高亮：

1. 创建代码块：

   • 点击工具栏中的代码块按钮
   • 或使用快捷键 Ctrl+Shift+C / Cmd+Shift+C

2. 选择语言：

   • 在代码块右上角的下拉菜单中选择语言
   • 支持JavaScript、Python、Java、HTML、CSS等多种语言

3. 语法高亮：

   • 代码块内容会自动根据所选语言进行语法高亮

协同编辑功能

实时协作

1. 用户状态：

   • 界面右上角显示当前正在编辑文档的用户头像
   • 将鼠标悬停在头像上可以查看用户名

2. 光标跟踪：

   • 编辑区内显示其他用户的光标位置
   • 不同用户的光标使用不同颜色区分
   • 光标旁显示用户名和彩色标识

3. 共享选区：

   • 可以看到其他用户所选择的文本区域
   • 选区使用与用户光标相同的颜色显示

评论功能

编辑器支持添加和查看评论：

1. 添加评论：

   • 选择文本内容
   • 点击工具栏中的评论图标或使用快捷键 Ctrl+M / Cmd+M
   • 在弹出的评论框中输入内容，点击"添加"

2. 查看评论：

   • 评论会在文本右侧边缘显示图标
   • 点击图标可以查看和回复评论
   • 带有评论的文本会使用淡黄色背景高亮显示

3. 评论列表：

   • 点击右侧面板中的评论图标查看所有评论列表
   • 可以按时间顺序或位置顺序排序查看

导出功能（暂未实现）

文档可以导出为多种格式：

1. 导出为PDF：

   • 点击工具栏中的"导出"按钮
   • 选择"PDF"选项
   • 等待生成完成后下载

2. 导出为Markdown：

   • 点击工具栏中的"导出"按钮
   • 选择"Markdown"选项
   • 将自动下载.md文件

常见问题

1. 为什么看不到其他用户的光标？

   • 检查编辑器底部是否显示"已连接"状态
   • 确保协同编辑服务器(server.js)正在运行

2. 为什么编辑内容没有保存？

   • 文档会自动保存，但需要确保与服务器的连接正常
   • 检查网络连接是否正常

3. 如何解决编辑冲突？

   • DocCollab基于CRDT算法，会自动解决冲突
   • 不需要手动干预，最终所有用户将看到相同内容