一个功能完备的博客文章编辑器，专注于 Markdown + Front-matter 写作体验。无需构建，开箱即用，支持实时预览、元数据管理、一键导入/导出，并自动保存草稿到本地。

• ✍️ Markdown 编辑器 – 支持标准 Markdown 语法，提供常用格式化按钮（加粗、斜体、链接、图片、代码块）
• 📄 Front-matter 元数据 – 使用 YAML 管理文章标题、日期、分类、标签、置顶、密码等字段，支持“高级设置”扩展字段（语言、许可证、作者、来源链接、Slug、密码提示等）
• 👁️ 实时预览 – 右侧同步渲染 Markdown，支持代码高亮
• 💾 本地草稿 – 一键保存/恢复草稿（LocalStorage）
• 📁 导入/导出 – 导入现有 .md 文件继续编辑，导出为带 Front-matter 的完整 Markdown 文件
• 🌗 深色模式 – 跟随系统或手动切换，护眼舒适
• 📱 响应式布局 – 在桌面和移动设备上均有良好表现

• Vue 3 – 响应式数据绑定
• TailwindCSS – 样式框架
• marked – Markdown 解析
• highlight.js – 代码高亮
• js-yaml – YAML 解析/生成
• Font Awesome 6 – 图标库

所有依赖均通过 CDN 引入，无需安装任何依赖。

1. 下载或克隆本仓库

   git clone https://github.com/Chuc-Jie/tomono-editor.git

2. 直接打开 index.html
   双击文件或用浏览器打开即可开始使用。

3. 编写文章

   • 左侧面板“基础信息”填写文章元数据（标题、日期、标签等）
   • 如需更多字段，展开“高级设置”填写（语言、许可证、作者、来源链接、Slug、密码等）
   • 右侧编辑器区域书写 Markdown 正文
   • 实时预览区展示渲染效果
   • 可使用工具栏按钮快速插入格式化语法

4. 保存与导出

   • 存草稿：将当前内容保存到浏览器本地
   • 恢复：读取上次保存的草稿
   • 导出：下载完整的 .md 文件（文件名格式：日期-标题.md）
   • 复制：一键复制完整 Markdown 源码

5. 导入已有文章
   点击“导入”按钮，选择 .md 文件（支持 Front-matter 格式），编辑器会自动解析并填充字段。

.
├── index.html          # 主应用文件（所有代码均在此）
├── images/             # 截图目录（可选）
│   ├── Light.png
│   └── Dark.png
└── README.md           # 项目说明文档

• 修改 frontmatter 的默认字段可在 setup() 中的 frontmatter 对象进行调整。
• 插入语法按钮的功能在 insertMarkdown 函数中定义，可按需增加新的快捷操作。
• 样式调整：全局样式与 Tailwind 类均可直接修改。

• 编辑器依赖外部 CDN，使用前请确保网络通畅。
• 草稿保存在浏览器 LocalStorage 中，清除浏览器数据会导致草稿丢失。
• 导出的文件名基于 slug 字段或文章标题生成，若标题含特殊字符会自动过滤。
• 截图 Light.png 和 Dark.png 需自行放置于 images 目录，或根据需要修改路径。

MIT © 友野工坊