笔记编辑器使用指南

轻笺的笔记编辑器支持 HTML 富文本（TinyMCE）和 Markdown 双模式，每篇笔记可独立选择编辑模式。以下是编辑器各项功能的详细说明。

编辑器模式（HTML / Markdown）

笔记支持两种编辑模式，新建笔记时可以选择：

• HTML 富文本模式：基于 TinyMCE 编辑器，提供类 Word 的所见即所得编辑体验。支持工具栏格式化、插入图片/表格/代码块、目录自动生成等完整功能。
• Markdown 模式：纯文本编辑 + 实时预览。左侧写 Markdown，右侧即时渲染 HTML 效果。支持标准 Markdown 语法（标题、列表、代码块、引用、表格等）。

切换模式

• 在笔记编辑器顶部标题栏右侧，点击 [HTML] 或 [MD] pill 切换。
• 切换时会自动转换内容格式（HTML ↔ Markdown），并弹出确认对话框。
• 切换后顶部会出现 ↩ 撤回按钮，可恢复至切换前的状态（仅当前会话有效）。
• 注意：切换操作会在确认后才执行，撤回也需要二次确认。

Markdown 模式预览

• PC 端：双栏布局，左栏 textarea 编辑，右栏实时渲染预览。
• 移动端：Tab 切换「编辑」和「预览」标签页，节省屏幕空间。

Markdown 模式下，目录导航基于正则解析 `#` 标题生成，点击目录项跳转到 textarea 对应行。

工具栏功能

基础格式

• 撤销/重做：支持编辑操作的撤销（Ctrl+Z）和重做（Ctrl+Y）。
• 文本样式：段落、标题（H1-H6）、引用块等多种文本块样式。
• 加粗/斜体/下划线/删除线：基础文字格式。
• 字体颜色/背景色：调整文字颜色和背景高亮。
• 对齐方式：左对齐、居中、右对齐、两端对齐。

列表与结构

• 无序列表/有序列表：项目符号列表和编号列表。
• 缩进/减少缩进：调整段落缩进层级。
• 待办清单（Todo Checkbox）：插入可勾选的复选框，支持点击切换完成状态。完成后的条目会自动添加删除线。
• 表格：插入和编辑表格，支持行列增删、合并单元格等操作。

插入内容

• 链接：插入超链接，选中文本后点击链接按钮并输入 URL。
• 图片：插入图片。支持点击上传、拖入图片、快捷键粘贴和右键粘贴上传。
• 表情（Emoji）：插入 Emoji 表情符号，丰富笔记表达。
• 代码块：插入格式化的代码块，支持 13 种编程语言的语法高亮：JavaScript、TypeScript、Python、Java、Go、Rust、C/C++、HTML、CSS、SQL、JSON、YAML、Bash/Shell。
• 搜索替换：在编辑器中搜索文本并批量替换。

快捷工具栏

选中文本时会自动弹出快捷工具栏，提供快速格式化操作：标题菜单、加粗、斜体、文字颜色、背景色、清除格式、快速链接等，减少鼠标移动距离。

目录/大纲导航

编辑器左侧的目录面板会根据笔记中的标题（H1-H6）自动生成文档大纲：

• 标题层级以缩进方式直观展示文档结构。
• 点击目录中的任意标题即可快速滚动到对应位置。
• 当前阅读位置的标题会高亮显示。
• 移动端目录以悬浮按钮形式出现，点击后弹出目录面板。

快捷键

操作	快捷键
保存笔记	Ctrl+S
撤销	Ctrl+Z
重做	Ctrl+Y
加粗	Ctrl+B
斜体	Ctrl+I
下划线	Ctrl+U
查找替换	Ctrl+F

移动端适配

移动端编辑器会简化部分工具栏按钮，保留核心编辑功能。目录面板以悬浮按钮形式提供，点击后弹出。编辑区域针对触控操作进行了优化。