Markdown 编辑器

了解 Knodo 内置 Markdown 编辑器的功能和使用方法

Markdown 编辑器

Knodo 提供功能丰富的在线 Markdown 编辑器，让您可以直接在浏览器中编写和编辑文档。

编辑器概述

功能特点

• 实时预览：编辑时实时看到渲染效果
• 语法高亮：Markdown 语法彩色显示
• 快捷工具栏：常用格式一键插入
• 自动保存：防止意外丢失
• 键盘快捷键：提高编辑效率

打开编辑器

在知识库中打开 Markdown 文件（.md）即可进入编辑模式：

1. 在文件树中点击 .md 文件
2. 点击工具栏的"编辑"按钮
3. 或直接双击文件

编辑器界面

编辑区

左侧为文本编辑区域：

• 显示原始 Markdown 文本
• 语法高亮
• 行号显示

预览区

右侧为实时预览区域：

• 显示渲染后的效果
• 与编辑区同步滚动
• 可隐藏/显示

工具栏

顶部工具栏提供快捷操作：

Markdown 语法

标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

文本格式

**粗体文本**
*斜体文本*
~~删除线~~
`行内代码`

列表

无序列表：
- 项目 1
- 项目 2
  - 子项目 2.1
  - 子项目 2.2

有序列表：
1. 第一项
2. 第二项
3. 第三项

链接和图片

[链接文字](https://example.com)

![图片描述](image.png)

代码

行内代码：`console.log('Hello')`

代码块：
```javascript
function hello() {
  console.log('Hello, World!');
}
```

引用

> 这是引用内容
> 可以多行
>
> > 嵌套引用

表格

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| A1  | A2  | A3  |
| B1  | B2  | B3  |

对齐方式：
| 左对齐 | 居中 | 右对齐 |
|:-------|:----:|-------:|
| 内容   | 内容 | 内容   |

分隔线

---
或
***

任务列表

- [x] 已完成任务
- [ ] 未完成任务

高级功能

数学公式

支持 LaTeX 语法的数学公式：

行内公式：$E = mc^2$

块级公式：
$$
\frac{-b \pm \sqrt{b^2-4ac}}{2a}
$$

Mermaid 图表

支持 Mermaid 语法的图表：

```mermaid
graph TD
    A[开始] --> B{判断}
    B -->|是| C[执行]
    B -->|否| D[结束]
```

脚注

这里有个脚注[^1]。

[^1]: 脚注内容

快捷键

文本格式

编辑操作

导航操作

图片处理

上传图片

方式一：工具栏上传

1. 点击图片按钮
2. 选择本地图片
3. 自动上传并插入

方式二：拖拽上传

1. 将图片拖入编辑区
2. 自动上传并插入

方式三：粘贴上传

1. 复制图片（截图或复制）
2. 在编辑器中粘贴（Ctrl/Cmd+V）
3. 自动上传并插入

图片存储

上传的图片自动保存到知识库的 assets 目录。

自动保存

保存机制

• 编辑后自动保存（延迟 2 秒）
• 切换文件时自动保存
• 关闭标签时自动保存

保存状态

编辑器显示保存状态：

• 🟢 已保存
• 🟡 保存中...
• 🔴 保存失败

手动保存

按 Ctrl/Cmd + S 立即保存。

编辑器设置

显示设置

• 主题：明亮/暗黑
• 字体大小：可调节
• 行号：显示/隐藏
• 自动换行：开启/关闭

预览设置

• 预览位置：右侧/下方/隐藏
• 同步滚动：开启/关闭

常见问题

Q：编辑器卡顿怎么办？

A：尝试关闭实时预览，或拆分大型文档。

Q：图片上传失败怎么办？

A：检查图片大小是否超过限制（10MB），或网络连接是否正常。

Q：如何插入特殊字符？

A：直接输入或使用 HTML 实体，如 © 显示 ©。

Q：支持自定义 CSS 吗？

A：目前不支持自定义预览样式。

相关文档

• 知识库管理
• 文件管理
• 文件预览