给博客加个在线编辑器！Hexo 博客文章编辑工具开发记录

写博客最麻烦的事情是什么？每次都要打开本地编辑器、找到正确的文件夹、创建新文件、还要记着 Hexo 的 front matter 格式……有没有一种更优雅的方式？

最近给自己的博客写了一个在线文章编辑器，彻底解决了这个痛点。这篇文章就来聊聊这个编辑器的设计思路和实现细节。

🎯 痛点分析

在写这个编辑器之前，我每次发博客都要经历这样一个流程：

1. 打开 VS Code
2. 找到 source/_posts/ 目录
3. 新建一个 .md 文件
4. 手动写 front matter（title、date、tags……）
5. 开始写正文
6. 终端运行 hexo g + hexo d

虽然不算复杂，但总觉得可以更顺滑。尤其是写 front matter 这件事，纯属机械性操作，浪费生命。

于是我花了大半天时间，给博客写了一个专属的在线编辑器。

✨ 功能设计

编辑器的核心目标是：在浏览器里写文章，一键导出符合 Hexo 规范的 Markdown 文件。

具体功能如下：

1. 富文本编辑

编辑器使用浏览器原生的 contenteditable 实现，无需引入任何第三方库。工具栏提供了完整的格式化选项：

• 文本样式：加粗、斜体、下划线（支持快捷键 Ctrl+B/I/U）
• 标题：H1、H2、H3 一键切换
• 列表：有序列表和无序列表
• 对齐：左对齐、居中
• 插入：链接、图片、代码块、引用、分割线

2. 实时双栏预览

最实用的功能之一：左侧写文章，右侧实时看到渲染效果。

编辑器右侧是一个只读的预览面板，当你在左侧输入时，右边会即时更新。这样写文章的时候就能直观看到最终效果，不用反复猜测格式是否正确。

3. 一键导出 Hexo Markdown

这是最关键的功能。点击「提交」按钮后，系统会自动：

1. 将富文本内容转换为标准 Markdown 语法
2. 生成符合 Hexo 规范的 front matter（包含 title、date、tags、categories）
3. 合并为完整的 .md 文件内容

生成的格式如下：

---
title: 文章标题
date: 2026-05-03 14:30:00
tags:
  - 标签1
  - 标签2
categories:
  - 分类
---

正文内容...

4. 数据验证与用户反馈

编辑器内置了完整的数据验证机制：

验证项	规则
标题	必填，最大 200 字符
内容	必填，最少 10 字符，最大 100,000 字符
字数统计	编辑器底部实时显示

提交时如果验证失败，会在对应位置显示红色错误提示。提交成功后，右上角会弹出 Toast 通知告知用户。

5. 文件下载与复制

生成 Markdown 后，提供两种获取方式：

• 下载 .md 文件：自动以文章标题命名文件，一键下载
• 复制到剪贴板：一键复制全部内容

下载后的文件只需要放入博客的 source/_posts/ 目录，然后 hexo g 即可。

🛠 技术实现

HTML 转 Markdown 的核心逻辑

这是最复杂的部分。由于使用的是 contenteditable，它输出的都是 HTML。要转换成 Markdown，需要处理各种 HTML 标签的对应转换：

// 标题转换
md = md.replace(/<h1[^>]*>([\s\S]*?)<\/h1>/gi, '# $1\n');
md = md.replace(/<h2[^>]*>([\s\S]*?)<\/h2>/gi, '## $1\n');

// 链接转换
md = md.replace(/<a[^>]*href=["']([^"']*)["'][^>]*>([\s\S]*?)<\/a>/gi, '[$2]($1)');

// 图片转换
md = md.replace(/<img[^>]*src=["']([^"']*)["'][^>]*alt=["']([^"']*)["'][^>]*\/?>/gi, '![$2]($1)');

纯前端实现

整个编辑器完全依赖浏览器原生 API，不依赖任何外部库：

• 富文本编辑：document.execCommand（已废弃但仍广泛支持）
• 文件下载：Blob + URL.createObjectURL
• 剪贴板：navigator.clipboard
• 弹窗：CSS + 原生 JS

这样做的好处是：只要能打开这个 HTML 文件的地方，就能用这个编辑器。

风格统一

编辑器的视觉风格完全参照博客已有的 DockerHDDM 命令生成器，保持了一致的暗色主题和配色方案：

:root {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #30363d;
  --text: #c9d1d9;
  --accent: #58a6ff;
  --green: #3fb950;
  --red: #f85149;
}

📋 使用方法

1. 打开 博客编辑器
2. 填写文章标题、标签、分类
3. 在左侧编辑器中撰写正文（右侧实时预览）
4. 点击「🚀 提交并生成文件」
5. 下载生成的 .md 文件
6. 将文件放入 source/_posts/ 目录
7. 运行 hexo g 部署

🔮 未来改进

目前这个编辑器已经满足了基本需求，但还有一些可以优化的地方：

• 图片上传：目前只支持输入 URL，未来可以接入图床实现本地上传
• 草稿保存：加入 LocalStorage 自动保存功能，防止意外丢失
• 多语言支持：增加中英文界面切换
• 模板功能：预设几种文章模板（如「教程」「笔记」「日常」），一键套用

📝 结语

这个小工具开发起来其实不算复杂，但确实能显著提升写博客的体验。纯前端实现意味着零门槛，随时随地都能用。

如果你也有 Hexo 博客，不妨试试给自己写一个专属编辑器。把它放在 source/tools/ 目录下，既不影响博客结构，又能随时通过 /tools/ 路径访问。

技术本身不复杂，关键是想清楚自己要解决什么问题，然后动手去做。

---

编辑器地址：博客文章编辑器

作者：Cai Zhenxin

博客：游手好闲辛大人