-
Notifications
You must be signed in to change notification settings - Fork 1
Article Editor
本文档详细介绍 FlecBlog 管理后台的文章编辑功能，涵盖从新建到发布的完整操作流程。
管理后台左侧菜单进入「文章管理」，点击「新增文章」创建新文章，或点击列表中的「编辑」按钮进入已有文章的编辑页面。
编辑器页面采用顶部导航栏 + 主编辑区 + 右侧设置抽屉的三段式布局。
顶部导航栏包含以下元素：
主编辑区基于 CodeMirror 6 构建，顶部为编辑器工具栏，底部显示统计信息字数和阅读时长，中间的编辑器支持不同视图。
点击「文章设置」按钮展开右侧抽屉，包含分类、标签、摘要、封面、发布属性等配置项。
编辑器顶部工具栏提供完整的格式化功能按钮，分为以下几组：
提供 H1 至 H6 六个标题级别按钮，用于构建文章层级结构： H1：文章主标题 H2：文章大章节标题 H3-H6：细分章节标题
支持拖拽上传：直接将图片拖入编辑区 支持剪贴板粘贴：截图后按 Ctrl+V 直接粘贴 支持格式：JPG、PNG、GIF、WebP 等常见图片格式
编辑器支持多种增强型 Markdown 语法：
用于展示提示、警告、成功、错误等信息：
用于展示并列的多个内容模块，读者可切换查看：
用于收纳较长内容，读者可自由展开或收起： 添加 open 参数可设置默认展开状态：
用于展示外部链接，呈现更美观的链接样式： 渲染效果：链接卡片会显示链接类型（站外链接/站内链接）、标题、描述和跳转箭头。
用于展示多张图片，支持多行布局： 使用 :::n 分隔不同行的图片。
用于添加视频播放，在文章中即可播放哔哩哔哩、YouTube 等在线视频 视频 ID 在视频播放页面 URL 中获得，如： 哔哩哔哩：https://www.bilibili.com/video/BV176M3zPEZu/ YouTube：https://www.youtube.com/watch?v=KMhk1J_VBqQ
按 Ctrl+F 打开搜索面板，做了一些适配，支持： 查找文本 高亮显示所有匹配项 上一处/下一处导航 匹配计数显示
编辑器使用 highlight.js 实现代码语法高亮，支持的语言包括但不限于： 前端：JavaScript、TypeScript、HTML、CSS、SCSS、Vue 后端：Python、Java、Go、Rust、PHP、Ruby 脚本：Shell、Bash、PowerShell 数据库：SQL 其他：JSON、YAML、XML、Markdown
右上角显示语言标签 一键复制按钮 可折叠/展开（长代码时非常有用）
编辑器支持直接渲染 Mermaid 图表语法： 支持的图表类型：流程图、时序图、类图、状态图、ER 图等。
点击工具栏「目录」按钮打开右侧目录面板： 自动提取文章中所有 H1-H6 标题 按层级缩进显示 点击标题可快速跳转到对应位置 实时更新，编辑内容后自动刷新
编辑器针对不同设备进行了适配：
点击「文章设置」按钮打开右侧设置抽屉。
文章封面显示在列表页和文章详情页顶部，支持三种配置方式：
点击图片上传区域，从本地选择图片文件。
在输入框中粘贴在线图片的 URL 地址。
点击「制作封面」按钮打开封面制作器界面。
所有文字元素都支持拖拽调整位置，拖拽时显示对齐辅助线。
输出尺寸：1920 x 1080 像素（16:9 比例） 输出格式：PNG 图片质量：95% 使用字体：SlidefontKBK
编辑器具有智能自动保存功能：
发布状态仅有草稿和已发布，保存时根据「是否发布」开关的状态决定文章的发布属性。
| 元素 | 说明 |
|---|---|
| 返回按钮 | 返回文章列表页面 |
| 页面标题 | 显示「新增文章」或「编辑文章」 |
| 标题输入框 | 输入文章标题，最大 80 字符 |
| AI 标题生成 | 点击右侧 AI 图标，根据内容生成标题建议 |
| 文章设置按钮 | 打开右侧设置抽屉 |
| 保存按钮 | 保存文章 |
| 视图模式 | 说明 |
|---|---|
| 分屏模式 | 默认，编辑区与预览区滚动同步 |
| 纯编辑模式 | 移动端编辑器占满宽度 |
| 纯预览模式 | 移动端预览区占满宽度 |
| 代码预览模式 | 预览区显示渲染后的 HTML 源代码 |
| 名称 | 语法 | 快捷键 |
|---|---|---|
| 粗体 | 文本 | Ctrl+B |
| 下划线 | ++文本++ | - |
| 斜体 | 文本 | Ctrl+I |
| 删除线 | - |
| 名称 | 语法示例 |
|---|---|
| 下标 | |
| 上标 | ^上标^ |
| 引用 | > 引用内容 |
| 无序列表 | - 列表项 |
| 有序列表 | 1. 列表项 |
| 任务列表 | - [ ] 待办 - [x] 已完成 |
| 名称 | 说明 |
|---|---|
| 行内代码 | 在光标位置或选中文本两侧插入反引号 `` |
| 块级代码 | 插入代码块语法，支持多语言语法高亮和折叠 |
| 链接 | 插入链接语法 文本 |
| 上传本地图片 | 打开文件选择器，支持多选图片上传 |
| 下载在线图片 | 输入图片 URL，下载并插入到文章 |
| 表情选择器 | 从配置的图床加载表情数据 |
| 插入表格 | 自动生成 3x3 表格模板 |
| 高亮文本 | ==高亮内容== |
| 行内公式 | 在光标位置或选中文本两侧插入货币符 $$ |
| 块级公式 | 插入块级公式语法 |
| Plain Text
| 列1 | 列2 | 列3 |
|---|---|---|
| 内容 | 内容 | 内容 |
| --- |
| Plain Text :::note info 提示标题 这是提示框的内容 支持四种类型：info、warning、success、error
| :::endnote |
|---|
| 类型 | 样式 | 适用场景 |
|---|---|---|
| info | 蓝色 | 一般提示信息 |
| warning | 黄色 | 警告、注意事项 |
| success | 绿色 | 成功、操作完成 |
| error | 红色 | 错误、失败提示 |
| Plain Text :::tabs :::tab 第一步 第一步的内容 :::endtab :::tab 第二步 第二步的内容 :::endtab
| :::endtabs |
|---|
| Plain Text :::fold 点击查看更多 这里是折叠的内容
| :::endfold |
|---|
| Plain Text :::fold 点击展开 open 默认展开的内容
| :::endfold |
|---|
| Plain Text
| :::link 标题 https://example.com 描述信息 ::: |
|---|
| Plain Text :::photo 图片1 图片2 图片3 :::n 图片4 图片5
| :::endphoto |
|---|
| Plain Text :::video bilibili 视频ID ::: :::video youtube 视频ID :::
| :::video 视频URL ::: |
|---|
| 名称 | 说明 |
|---|---|
| 浏览器全屏 | 调用浏览器全屏 API |
| 编辑器全屏 | 隐藏浏览器 UI，编辑器占满屏幕 |
| HTML 代码预览 | 查看渲染后的 HTML 源代码 |
| 切换预览 | 在编辑模式和预览模式间切换（移动端） |
| 目录面板 | 显示文章标题目录，支持点击跳转 |
| 快捷键 | 功能 |
|---|---|
| Ctrl+B | 插入粗体语法 |
| Ctrl+I | 插入斜体语法 |
| Ctrl+S | 保存文章 |
| Ctrl+F | 打开搜索面板 |
| Enter | 换行 |
| Shift+Enter | 段内换行 |
| Plain Text graph TD A[开始] --> B[过程]
| B --> C[结束] |
|---|
| 配置项 | 说明 | 操作方式 |
|---|---|---|
| 文章分类 | 文章所属分类 | 下拉选择或输入新分类名称（自动创建） |
| 文章标签 | 文章标签 | 多选下拉框，支持输入新标签（自动创建） |
| 配置项 | 说明 | 字符数 |
|---|---|---|
| 文章摘要 | 文章的简短描述 | 150 字内 |
| AI 总结 | AI 生成的旁观者视角总结 | 300 字内 |
| 图源 | 说明 |
|---|---|
| Unsplash | 免费高清图片库 |
| Pixabay | 另一个知名免费图库 |
| Pexels | 免费高清图片资源 |
| 上传 | 使用本地图片 |
| 元素 | 说明 | 可调整属性 |
|---|---|---|
| 标题 | 显示在封面上方的文章标题 | 可拖拽定位 |
| 作者 | 显示在封面下方的作者名称 | 可拖拽定位 |
| 头像 | 作者头像图片 | 可拖拽定位、大小 |
| 选项 | 说明 |
|---|---|
| 应用 | 仅将封面应用到文章 |
| 应用并导出 | 应用到文章并下载到本地 |
| 仅导出 | 仅下载到本地 |
| 配置项 | 说明 |
|---|---|
| 发布地点 | 文章发布的地理位置 |
| 是否置顶 | 置顶后显示在文章列表最顶部 |
| 是否精选 | 标记为精选文章 |
| 过时提醒 | 显示文章过时的提示信息 |
| 是否发布 | 关闭则为草稿，博客前台不显示 |
| 配置项 | 说明 |
|---|---|
| 发布时间 | 文章首次发布的时间 |
| 更新时间 | 文章最后一次修改的时间 |
| 注意：发布时间和更新时间仅在编辑已有文章时显示，新建文章无需填写。 |
|---|
| 场景 | 行为 |
|---|---|
| 新建文章/编辑草稿文章 | 每 30 秒自动保存一次草稿 |
| 编辑已发布文章 | 不自动保存，避免覆盖线上内容 |
| 离开页面 | 检测未保存修改，弹出确认对话框 |
相关页面：