自用 markdown 编辑器

vue + monaco-editor + markdown-it + nodejs + Koa

[toc]{level: [2]}

目标

1. 界面字大不费眼 :)
2. markdown 撰写
3. 图片文件保存在本地，导出 markdown 文件可简单处理离线工作
4. 支持一些流程图表绘制 planttuml
5. 支持加密解密，用来保存账号等隐私文件，文件可单独设置密码
6. 不需要更多花哨功能，简单够用就行
7. 尽量少依赖三方库，也不花心思维护，杂凑在一起的功能，恰好工作即可 ^_^
8. 在文档中运行 PHP Python Node.js bash 代码块

上手使用

• 使用容器来安装：docker-readme.md
• 安装

  # 安装前端
  cd frontend
  yarn # or npm i
  yarn run dist # or npm run dist
  # yarn run dist-win # or npm run dist-win # Windows 用户
  
  # 安装后端
  cd ../background
  yarn # or npm i
  node main.js # 运行

• 访问 http://localhost:3000
• 新增文件：双击目录
• 在系统中打开文件/目录：Ctrl ＋ 双击文件/目录
• 删除文件/目录：Shift + 右键文件/目录
• 重命名文件/目录：Ctrl + 右键文件/目录
• 切换文档预览显示：Alt + V 或点击状态栏 切换预览 按钮
• 切换编辑器自动换行：Alt + W 或点击状态栏 切换换行 按钮
• 切换内置终端展示：Alt + O 或点击状态栏 切换终端 按钮
• 切换内置终端工作目录到当前目录 Ctrl + Alt + 单击目录
• 刷新目录树 双击目录空白区域
• 将外链或 BASE64 图片转换为本地图片：Ctrl + Shift + 单击图片 Ctrl + Alt + L 转换所有外链图片到本地
• 默认文件存储在 ./data 目录下，添加更多仓库请编辑 ./config.json 文件
• 默认快捷键参考 vscode
  • Ctrl + X 剪切所选/当前行
  • Ctrl + C 复制所选/当前行
  • Ctrl + Z 撤消
  • Ctrl + Shift + Z 反撤消
  • Ctrl + / 注释行
  • Ctrl + Shift + A 注释段
  • Ctrl + K, Ctrl + X 删除尾部空格
  • Alt + Click 插入光标
  • Shift + Alt + ↑/↓ 在相邻行插入光标
  • Ctrl + U 取消最后添加的光标
  • Shift + Alt + I 在选中区的所有行的最后添加光标
  • Ctrl + D 为下一个匹配项添加光标
  • Ctrl + F 查找
  • Ctrl + H 替换
• 自定义编辑器快捷键
  • Ctrl + P 打开文件快速跳转面板
  • Ctrl + S 保存文档
  • Ctrl + Enter 强制插入新行，忽略预置补全规则
  • Shift + Enter 强制插入 Tab，忽略预置补全规则
  • Ctrl + Shift + Up 当前行上移
  • Ctrl + Shift + Down 当前行下移
  • Ctrl + Shift + D 重复当前行
  • Ctrl + Alt + D 插入当前日期
  • Ctrl + Alt + T 插入当前时间
  • Ctrl + Alt + F 插入文件附件
  • Ctrl + Alt + I 插入文档链接
  • Ctrl + J 连接行 join lines
  • Ctrl + K, Ctrl + U 转换大写
  • Ctrl + K, Ctrl + L 转换小写
  • Ctrl + Alt + R 在内置终端里面运行选中内容
  • Ctrl + B + V 粘贴 html 富文本

特色功能

• 同步预览滚动，实现得较粗糙
• 目录大纲展示
• 文件加密：以 .c.md 结尾的文件视为加密文件
• 自动保存（加密文档不自动保存）
• 列表自动补全
• 粘贴剪切板里面的图片
• 添加附件到文档
• 运行 PHP，nodejs，Python，bash 代码，代码块第一行需要包含以 --run-- 字符串，示例见下面截图，当然需要安装相关环境
• 开启了 HTML 解析，可以直接在文档里面使用 HTML 代码
• 待办进度条
• 快速跳转文件，全文搜索文件内容
• 多仓库切换
• 生成 TOC 在需要生成目录的地方写入 [toc]{type: "ol", level: [1,2,3]} 即可
• docx 格式导出，需要安装 pandoc
• ECharts 图形支持 ECharts Js 代码块第一行需要包含以 --echarts-- 字符串，示例见下面截图
• markdown 编辑器 monaco-editor
• markdown 解析 markdown-it
• GitHub 风格样式和特性 GitHub Flavored Markdown Spec
• 待办列表 GitHub-style task lists
• Plantuml 图形，需要安装 Java，graphviz markdown-it-plantuml
• katex 公式解析 markdown-it-katex
• 元素属性书写 markdown-it-attrs
• 表格解析增强，支持表格标题多行文本，列表等特性 markdown-it-multimd-table
• 内置终端 XTERM.JS node-pty

开发贡献

• 前端: cd backend; node main.js
• 后端: cd frontend; yarn run serve

捐赠

如果我的工作对您有帮助，请我喝杯咖啡吧 ^_^。附言可以留下您的 github 用户名或网站连接。

　　

1. wangyedong66 2元
2. yubingcen 0.1元

界面截图

更新日志

最新发布

v1.23.0 2019-07-09

1. 增加转换所有外链图片到本地功能 Ctrl + Alt + L

v1.22.0 2019-05-20

1. 增加粘贴 html 富文本功能 Ctrl + B + V
2. 增加插入文档快捷键 Ctrl + Alt + I
3. 修复 vue cli 3 打包错误
4. 修复图片链接转义
5. 搜索排除 node_modules
6. 上传文件目录优化

v1.21.0 2019-05-03

1. 调整抓取图片到本地的逻辑
2. 优化目录树样式
3. 目录树排除 node_modules
4. eslint 规则调整

v1.20.0 2019-04-18

1. 无功能变化，前端使用 vue cli 3

v1.19.0 2019-04-15

1. 增加终端打开目录功能 Ctrl + Alt + 单击目录
2. 增加刷新目录树功能 Ctrl + Alt + 单击目录

v1.18.2 2019-03-21

1. 保存加密文件密码不一致时增加提示
2. 修复样式问题

v1.18.1 2019-03-01

1. 修复目录样式
2. 修复代码块样式

v1.18.0 2019-02-28

1. 代码块增加行号显示
2. 支持统一文档锚点跳转
3. 移除 Mermaid 支持
4. 优化打印样式
5. 优化行内代码样式

v1.17.0 2019-02-20

1. 支持 ECharts 图形
2. Ctrl + Alt + R 在内置终端中运行选中代码

v1.16.2 2019-02-18

1. 文件树增加操作说明
2. 新增/重命名文件后打开新文件

v1.16.1 2019-02-17

1. 修复打印样式

v1.16.0 2019-02-16

1. 增加 Readme 展示
2. 处理终端退出逻辑

v1.15.1 2019-02-14

1. 更新 UI
2. 内置终端增加 windows 适配

v1.15.0 2019-02-13

1. 增加内置终端
2. 运行代码支持在内置终端运行

v1.14.0 2019-01-16

1. 上传附件增加日期
2. 快速跳转改用模糊搜索并高亮匹配项

v1.13.1 2019-01-14

1. 修复 hr 标签样式

v1.13.0 2019-01-05

1. 增加 toc
2. 增加返回顶部按钮

v1.12.0 2019-01-03

1. 增加连接行快捷键 Ctrl + J
2. 增加转换大小写快捷键 Ctrl + K, Ctrl + U Ctrl + K, Ctrl + L

v1.11.0 2019-01-02

1. 切换编辑器自动换行：Alt + W 或点击状态栏 切换换行 按钮

v1.10.0 2018-12-24

1. 文件列表自然排序
2. 文件目录增加子项目数量显示

v1.9.0 2018-11-12

1. 增加切换文档预览功能

v1.8.0 2018-08-29

1. 增加在系统中打开文件/目录功能 Ctrl + 双击文件/目录

v1.6 2018-08-22

1. 修复部分样式不和谐
2. 修复打开新文件编辑器滚动位置不正确
3. 增加将外链或 BASE64 图片转换为本地图片功能
4. 优化代码高亮在暗色主题下的展示
5. 渲染链接默认在新标签打开

v1.5.2 2018-08-13

1. 优化输入数字列表体验
2. 增加直接插入回车和Tab的快捷键
3. 确保文件最后有空行
4. 文件跳转按照最近打开文件排序

v1.5.1 2018-08-06

1. 修复打开上一次文件bug

v1.5 2018-08-06

1. 增加状态栏
2. 添加多仓库支持

v1.4 2018-08-02

1. 增加全文搜索功能
2. 修复公式定位问题

v1.3 2018-08-02

1. 增加待办记录时间
2. 增加 bat 脚本运行
3. 优化使用体验

v1.2 2018-07-30

1. 增加待办进度条展示

v1.1 2018-07-29

1. 修复若干问题
2. 增加附件插入
3. 调整为暗色主题
4. 图片新标签预览
5. 增加文件筛选面板 Ctrl + p

开发计划

• 回收站
• 文件重命名
• 文件树目录排列
• 打印 PDF 样式
• 保存快捷键
• 加密解密
• 优化输入列表体验
• 图片粘贴预览
• 未保存切换文件自动保存
• 密码输入优化
• 静态文件
• 公式显示
• 运行 python php nodejs 块
• 大纲展示
• 同步滚动
• 暗色主题
• 全文查找 Ctrl + p
• 支持多根目录
• 状态栏
• toc 生成
• 内置终端
• ECharts 图表
• 代码块渲染增加行号
• 脚注引用
• 信息流，定时任务
• 标签支持
• 跨文件跳转
• 表格编辑器
• 运行代码支持图表生成
• 认证，// 如有需要使用 nginx
• git 备份，// 使用 OneDrive 同步备份
• 移动端展示