Markdown编辑器

一个功能强大、界面美观的在线Markdown编辑器，支持实时预览、主题切换、自动保存等多种实用功能。

English | 中文

功能特点

• 实时预览：编辑Markdown文本的同时，即时查看渲染效果
• 智能滚动同步：编辑区和预览区滚动自动同步，支持基于标题的智能定位
• 主题切换：支持亮色、暗色和自动（跟随系统）三种主题模式
• 中英双语界面：支持中英文界面切换，满足不同用户的语言偏好
  • 示例文本自动随语言切换，提供更好的入门体验
  • 完整的双语提示系统，确保操作反馈清晰明了
• 自动保存：可选的自动保存功能，防止意外丢失内容
• 增强的导出功能：支持一键导出为Markdown文件和PDF文件，自动使用文档标题作为文件名
• 丰富的编辑工具：提供粗体、斜体、标题、链接、图片、列表、引用、代码块等快捷工具
• 键盘快捷键：支持多种常用编辑操作的键盘快捷键
• 行号显示：显示行号并高亮当前行号，方便定位编辑位置
• 历史记录：支持撤销和重做操作
• 性能优化：针对长文档进行了性能优化，支持虚拟滚动和代码高亮懒加载
• 图片处理：支持本地图片上传和管理，自动保存到localStorage
• 错误处理：增强的错误处理机制，确保编辑器在各种情况下都能稳定运行
• 图片处理增强：改进了图片上传和存储机制，防止无效图片数据导致的问题
• 导出功能：
  • 支持从文档标题自动生成文件名
  • 增强的错误处理，防止导出过程中的异常
  • 改进的PDF导出，更好地保留文档格式
  • 多种PDF导出方式，确保在不同环境下都能正常工作
  • 防止重复导出，避免生成多个相同文件
• 自动构建与发布：
  • 使用GitHub Actions自动构建和发布新版本
  • 每次创建新标签时自动触发构建流程
  • 自动将构建产物发布到GitHub Release中

有关所有更新的详细信息，请查看更新日志 (English)。

技术栈

• 纯原生JavaScript，无需任何框架
• 使用Marked进行Markdown解析
• 使用highlight.js进行代码高亮
• 使用Split.js实现分栏布局
• 使用html2canvas和jsPDF实现PDF导出
• 使用Font Awesome提供图标支持
• 自定义字体：LXGW WenKai
• 使用GitHub Actions实现自动构建和发布

部署说明

本地部署

1. 克隆仓库到本地：

   git clone https://github.com/pengchangg/markdown-editor.git
   cd markdown-editor

2. 由于项目使用纯HTML/CSS/JavaScript开发，无需构建步骤，直接使用任意Web服务器托管即可：

   # 使用Python的简易HTTP服务器
   python3 -m http.server 8000
   
   # 或使用Node.js的http-server
   npx http-server -p 8000

3. 在浏览器中访问 http://localhost:8000 即可使用编辑器。

线上部署

1. 将项目文件上传到任意静态网站托管服务，如GitHub Pages、Netlify、Vercel等：

   GitHub Pages部署：

   # 假设你已经初始化了Git仓库
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/yourusername/markdown-editor.git
   git push -u origin main

   然后在GitHub仓库设置中启用GitHub Pages功能。

   Netlify/Vercel部署： 在对应平台导入GitHub仓库，或直接上传项目文件夹。

2. 部署完成后，通过分配的域名即可访问编辑器。

使用说明

1. 编辑器基本操作：

   • 左侧为编辑区，右侧为预览区
   • 工具栏提供常用Markdown格式化功能
   • 状态栏显示字符数、光标位置和保存状态

2. 导出功能：

   • 点击导出按钮，选择导出格式（Markdown或PDF）
   • 在弹出的预览窗口中确认文件名和内容
   • 点击确认导出按钮完成导出

3. 主题切换：

   • 点击右上角的主题按钮切换亮色/暗色主题
   • 主题设置会自动保存

4. 自动保存：

   • 点击自动保存按钮开启/关闭自动保存功能
   • 开启后，编辑内容会每30秒自动保存一次

浏览器兼容性

• 支持所有现代浏览器（Chrome、Firefox、Safari、Edge等最新版本）
• 不支持Internet Explorer

本地存储说明

编辑器使用浏览器的localStorage存储以下信息：

• 编辑内容（markdown-editor-content）
• 主题设置（markdown-editor-theme）
• 自动保存设置（markdown-editor-autosave）
• 上传的图片数据（markdown-editor-images）

许可证

MIT

资源本地化构建工具

这个项目包含一个资源本地化构建工具，可以将所有外部资源下载到本地，并进行压缩和引用替换。

功能

• 下载所有外部网络资源（JS、CSS、图片、字体等）到本地
• 压缩JS和CSS文件
• 压缩字体文件（TTF/OTF转WOFF2）
• 替换HTML文件中的资源引用为本地路径
• 处理CSS文件中的URL引用
• 将所有资源整理到dist目录中

使用方法

1. 安装依赖：

yarn install

2. 运行构建脚本：

yarn build

或者直接运行：

node build.js

3. 构建完成后，所有资源将被保存到dist目录中，可以直接部署使用。

自动发布

项目使用GitHub Actions自动构建和发布新版本。详细的发布流程请参考发布指南。

目录结构

构建后的目录结构如下：

dist/
├── assets/
│   ├── css/      # CSS文件
│   ├── js/       # JS文件
│   ├── fonts/    # 字体文件
│   └── images/   # 图片文件
└── *.html        # HTML文件

注意事项

• 构建过程会清空dist目录，请确保不要将重要文件放在该目录中
• 如果遇到下载失败的资源，请检查网络连接或资源URL是否有效
• 对于动态加载的资源，可能需要手动处理