纯前端的Hexo文章编辑器

#软件

这是由Deepseek flash v4.1进行编写的文章编辑器。

纯前端（无后端、无构建、无依赖安装）的 Markdown 文章编辑器，直接读写本项目Hexo博客的source/_posts，格式与ZEROKAMI站内已有文章完全一致。因此本项目可能在图片路径、视频块使用等方面与各位的Hexo博客有着较大差异，可能并不适用于你的Hexo博客。

1
2
3
4
5
6
7
hexo-editor/
├── index.html              界面（双击即用，不需要任何服务）
├── assets/
│   ├── core.js             格式层：Front Matter 解析/序列化、abbrlink(crc32)、文件名、视频块
│   ├── app.js              编辑器主程序
│   └── editor.css          样式
└── test/                   7 套自动化测试（473 条断言）

一、怎么打开

在线使用

本项目已经上传至Github仓库，可直接使用 https://xieyuqaq.github.io/Hexo-editor/。如果你所处的地方对Github访问并不友好，也可以从https://zerokami.cn/tools/hexo-editor上进行访问。

下载使用

双击 index.html，用 Chrome / Edge 打开（Firefox / Safari 没有 File System
Access API，只能「导入文件夹」只读编辑 + 下载，见下方说明）。

只有第一次打开、或有目录没连上时才会弹出「连接目录」引导（里面分别连
文章目录（必填）和 图片目录（可选），连完点「进入编辑器」）。两个目录都连好之后，
以后再打开就直接进编辑器，不弹任何窗口。目录记在浏览器里，下次打开自动恢复；
连没连上，看左下角列表底部的两个圆点（绿=已连接，红=未连接），点圆点随时能回来换目录。

选项目根目录最省事（编辑器会自动找到 source/_posts 与 source/images）；
选 source 或直接选 _posts 也都能识别。

关于 file ：file:// 的 origin 虽然是 null，但 Chromium 只在「跨源子框架」
「没有用户手势」时拦目录选择器，不拦 file:// —— 双击打开同样能直接写盘
（2026-10 实测）。唯一代价是源不透明，浏览器对目录授权的长期记忆不可靠：重开浏览器后
圆点可能变红并提示「已记住 X，需要重新授权」，点一下「重新授权」即可，不用重新翻目录。

早期版本这里写着「file:// 下 API 被禁用、只能导入并下载」，那是把 OPFS 的规则
错套到了 picker 上 —— 已实测推翻。

不再需要本地服务：原来的 serve.mjs / start-editor.bat 已删除，纯静态文件即可运行。

二、能做什么

文章属性（对应 Front Matter）

面板上的名字 字段 说明
标题 title 必填
链接 abbrlink 新建时锁定；hexo generate 写入文件后，点 ↻ 重新读取即解锁
文章描述 description 单行自动转标量；多行自动变成 >- 折叠块（与站内 5 篇文章一致）
标签 tags 内联数组 tags: [网站, 软件]；带站点已有标签的联想
时间 date 新建后锁定；文件保存一次后解锁，格式 YYYY-MM-DD HH:mm:ss
封面 cover 站内绝对路径 /images/... 或完整 URL；可从本地选图并自动复制进 source/images/YYYY/MM/

锁定逻辑按你的要求实现：

正文（所见即所得）

正文区不再是纯文本框，也不再需要手动开预览：打字时块级效果立刻生效 ——
输入 # + 空格 + 文字，这一行马上变成一级标题（H2 到 H6 同理），
> 变成带竖线的引用、- 变成 • 列表、``` 变成代码块底色。

工具栏覆盖：H1–H6、加粗、斜体、删除线、行内代码、文字颜色（<font color>）、
无序/有序/任务列表、引用、链接、图片、表格、代码块（可填语言）、分割线、
<!-- more -->、<kbd>、上标、下标、折叠块、居中容器、脚注、撤销/重做。

插入图片：点「图片」选本地文件，或直接把图片拖进编辑区 ——
图片按年月存进 source/images/YYYY/MM/，文件名自动换成 10 位随机字母数字
（如 7k3f9a2c1d.png，后缀沿用原文件），正文插入 ![](/images/YYYY/MM/7k3f9a2c1d.png)。
「封面」里的「选图」走同一条路径，命名规则一致。

插入视频：点「▶ 视频块」，填哔哩哔哩 BV 号 / YouTube 链接。默认勾选
「判断网络，自动选择哔哩哔哩 / YouTube」（两个平台都必须填），生成的代码
与站内 23 篇文章完全相同：

1
2
3
4
5
6
7
8
9
10
<div id="videoContainer">
  <p>请稍等，正在根据您的网络加载播放器……</p>
</div>
<script>
  function loadBilibiliVideo() { ... }
  function loadYouTubeVideo() { ... }
  checkGoogle().then(function(status) {
  if (status === 0) { ...哔哩哔哩... } else { ...YouTube... }
  });
</script>

取消勾选则只需填其中一个平台，生成单平台 iframe（不判断网络、不带 script）。
支持两种布局（等比 16:9 / 固定高 450），并可追加 > 视频 / > 哔哩哔哩 ... / > YouTuBe ... 引用块。

视频块在编辑器里可直接预览：折叠态显示成 16:9 的播放器 iframe（哔哩哔哩优先），
块内源码隐藏；点进块内任意一行即展开全部源码供编辑，光标移出后自动折叠回播放器。
代码块（```）里的视频块示例代码不会被误识别。

其他

三、格式兼容性是怎么保证的

assets/core.js 只做最小必要解析，核心策略是：没改过的字段按原始行逐字节回写。

因此：

新文章则按站内主流顺序生成：
title → abbrlink → description → tags → date → cover，
abbrlink 留空、cover 留空（都输出成 cover: ，与 45 篇无封面文章一致）。

文件名建议规则复刻现有命名：<两位年份> <标题>.md（如 26 迈从G3 A鼠标开箱.md），
也可切换成 YYMM 或纯标题。

端到端验证

已用编辑器生成一篇包含标题/列表/表格/代码/图片/字体颜色/视频块的文章，
放入 source/_posts 跑 hexo clean && hexo generate：

四、测试

1
2
3
4
5
6
7
node hexo-editor/test/roundtrip.test.mjs   # 全部文章逐字节往返一致
node hexo-editor/test/edit.test.mjs        # 单字段编辑语义 + YAML 引用安全 + crc32 对齐
node hexo-editor/test/ui.test.mjs          # jsdom：页面结构 / 工具栏 / 锁定初始态 / 目录引导与圆点
node hexo-editor/test/interact.test.mjs    # jsdom：真实改字段、插 Markdown、保存、删除、筛选
node hexo-editor/test/selectors.test.mjs   # 静态审计：47 个 id、30 个动作、CSS 类全部对得上
node hexo-editor/test/fs-e2e.test.mjs      # 内存版 FSA：打开目录→改字段→写盘→改名→删除→重新授权
node hexo-editor/test/wysiwyg.test.mjs     # 所见即所得：90 篇正文 DOM 往返、表格/图片即时渲染、回车/退格/撤销

当前全部通过（473 条断言）。

五、已知边界