轻量级所见即所得(WYSIWYG)Markdown 编辑器,基于 Tauri 2 + Vditor 构建,跨平台(Windows / Linux / NixOS)。
灵感来源:zaaack/vscode-markdown-editor。
- 三种编辑模式:所见即所得(WYSIWYG)/ 即时渲染(IR,默认)/ 分屏
- 完整工具栏:标题、加粗、斜体、删除线、链接、列表、任务列表、引用、代码块、行内代码、表格、表情、分割线、撤销/重做、大纲、代码主题/内容主题
- KaTeX 数学公式 与 Mermaid 流程图(经 Vditor 渲染)
- 编辑器内查找栏(
Ctrl+F/Cmd+F):CSS Highlight 高亮,区分大小写、上/下条切换、计数显示 - 行号 gutter(工具栏
#切换):按 Markdown 块显示起始行,随内容实时更新 - 复制 Markdown / 复制 HTML 到剪贴板
- 打开 / 新建 / 保存 / 另存为(
Ctrl+O/Ctrl+N/Ctrl+S) - 自动保存(300ms 防抖),不清 dirty 标记;外部修改检测:切回窗口时按 mtime 对比提示重载
- 关闭确认三态:保存并关闭 / 不保存 / 取消关闭;保存失败会中止关闭,防止丢数据
- 拖拽打开
.md文件 - 命令行打开:
sleephat-editor path/to/file.md - 最近文件列表(最多 10 条,随打开自动维护)
- 粘贴 / 拖拽图片上传,自动保存到
<文档目录>/assets/(目录可配置,见下) - 相对路径图片/音视频即时预览:自定义
vmd-asset://协议按文档目录解析,图片不再 404 - 上传安全:扩展名白名单、单文件 20MB 上限、文件名净化(防路径穿越)、目录拒绝绝对路径/
../
- 深浅色主题:默认跟随系统,也可在欢迎页手动覆盖(记住选择)
- 自定义 CSS:config.json 的
custom_css字段注入<style>,自由调整渲染样式 - 滚动位置持久化:按文件路径记录阅读位置,关闭重开后恢复
- CSP 内容安全策略 + 发布版关闭 devtools
- 链接拦截:拒绝
javascript:/data:/file:等 scheme、执行型扩展名(.exe.bat等)、相对链接限定文档目录内(防../越界) - 配置保存读-改-写合并,不再整体覆盖清空
recent_files - 配置损坏自动备份为
config.json.bak再回落默认 - Tauri capabilities 权限收敛(
core:default+dialog:default+dialog:allow-ask)
待补充:
- 编辑器主界面(即时渲染模式 + 行号 + 工具栏)
- 查找栏
- 深色主题
- 图片相对路径预览
| 层 | 技术 |
|---|---|
| 桌面壳 | Tauri 2(Rust),插件 plugin-dialog、plugin-opener |
| 编辑器内核 | Vditor 3.x |
| 前端 | TypeScript + Vite 4,@tauri-apps/api |
| 其他 | date-fns、lodash |
npm install
npm run typecheck # 类型检查,应 0 错
npm run tauri dev # 开发模式
npm run tauri build # 发布构建(Linux 默认产出 .deb,配置见 src-tauri/tauri.conf.json)国内镜像源:仓库自带
.npmrc(npmmirror)与src-tauri/.cargo/config.toml(rsproxy sparse index),在国内网络下加速 npm / crates.io 下载。非国内网络环境可删除这两个文件以走官方源。
npm install
npm run tauri dev需要 Rust 工具链(rustup)与 VS Build Tools(MSVC)。
sudo apt install libwebkit2gtk-4.1-dev libgtk-3-dev \
librsvg2-dev libayatana-appindicator3-dev \
rustc cargo nodejs npmsudo dnf install rust cargo nodejs npm \
webkitgtk4.1-devel gtk3-devel仓库提供 shell.nix(开发环境)与 default.nix(把预编译产物包成 Nix 派生式)。
nix-shell # 进入开发环境(自动配置 PKG_CONFIG_PATH / SSL_CERT_FILE)
npm install
npm run tauri devshell.nix 已内置构建 Tauri 所需的系统依赖(webkitgtk_4_1、gtk3、librsvg、libappindicator-gtk3、openssl、gstreamer 全家桶),并清空代理环境变量(防止 WebView 经代理访问 localhost 白屏 / 502)。
打包成品(先 npm run tauri build 再用 default.nix 包装):
npm run tauri build
nix-build default.nix注意:
default.nix是「包装」而非「从源码构建」——它直接拷贝src-tauri/target/release/markdown-editor并加上 GApp 包装参数,需先完成普通构建。
配置文件位置:
- Windows:
%APPDATA%\com.sleephat.editor\config.json - Linux / NixOS:
~/.config/com.sleephat.editor/config.json
| 字段 | 类型 | 说明 |
|---|---|---|
vditor_options |
object | Vditor 初始化选项(主题、预览配置),编辑器内切换会自动保存 |
recent_files |
string[] | 最近打开文件列表(最多 10 条),自动维护 |
window_width / window_height / window_x / window_y |
number | 窗口几何 |
welcome_dark |
boolean | 主题手动覆盖:true=深色,false=浅色;缺省时跟随系统深浅色 |
custom_css |
string | 自定义 CSS 原文,启动时注入 <style> |
image_save_folder |
string | 图片保存目录(相对文档目录,默认 assets;拒绝绝对路径与 ../ 穿越) |
示例:
{
"vditor_options": { "theme": "dark" },
"recent_files": ["C:\\notes\\test.md"],
"welcome_dark": true,
"custom_css": ".vditor-reset { line-height: 1.8 !important; }",
"image_save_folder": "img"
}完整的手动测试方案见 TEST_PLAN.md,覆盖:
- P0:关闭三态、图片上传路径安全、链接安全、主题切换不丢最近文件
- P1:重置配置、表格多表/空单元格定位、对话框不卡 UI、另存后不误报外部修改
- P2:表格对齐保留、IPC 节流、查找栏、上传异常、新建文件基准
- P3:控制台干净、连续点击不吞、打开后立即输入、语言、坏配置备份
- P4:图片相对路径预览、滚动位置持久化、行号、主题联动、customCss、imageSaveFolder
快速开始:
npm run typecheck # 0 错
npm run tauri dev -- -- test.md # 用测试文档打开,验证链接/查找栏/表格仓库根目录的 test.md 与 sub.md 是现成的链接/查找栏验证样本。
- 音/视频大文件:
vmd-asset://协议未实现 HTTP Range,长视频可能缓冲慢;图片完全不受影响。 - 自定义协议路由:相对路径预览依赖 Tauri 运行时的协议注册,WebView2 / WebKitGTK 各平台需实测确认。
- 滚动位置持久化:以文件绝对路径为 localStorage key,重命名/移动文件后旧位置失效(正常现象)。
- 主题联动语义:
content-theme工具栏的手动选择仅当前会话有效;重启后若无welcome_dark设置则跟随系统主题。 - 配置无 UI 入口:
custom_css/image_save_folder目前只能手动编辑 config.json。 - 实测程度:项目已完成一轮代码级审查修复与类型检查(
tsc --noEmit0 错),但尚未大规模实机测试,部分边界场景(超大文档搜索、表格多表定位、自定义协议路由)可能在真实使用中暴露问题。
- Vditor —— 编辑器内核
- zaaack/vscode-markdown-editor —— 设计灵感与部分前端逻辑移植来源
- Tauri —— 桌面壳
MIT
