跳转至

项目概览 HemyEditor

这是一个个人项目。

一、背景介绍

工作中经常遇到需要写一些资料的地方，记录笔记之类的，在早期的时候，用过各种的工具，比如：ediary、为知笔记、印象笔记、OneNote等各种的工具。这些早期的工具都是不支持markdown文档的，生成的文件也不是doc、pdf等一些常见的文件，如果要生成常见文档，还得找各种的插件，然后导出到对应的文档类型，插件有时候并不是很好用，导出的文档格式并不是想要的格式，很不完美。

后面markdown开始火起来了，具体是啥时候火起来的就不记得了，我接触的时候应该是2019年左右吧。发现这种格式的文档很好用，也比较美观。

个人先后也用过不少的markdown编辑器：

  • Markdown pad 2 这个是最早使用的工具。这个的预览窗口和编辑窗口可以同屏幕，个人还是比较喜欢这种方式的。这个工具只能编辑单个的markdown文档，不具有资源管理的功能。
  • Typora 这个工具有段时间发现别人都在用，就试用了下。这款编辑器的预览是实时的，编辑窗口和预览窗口混在一起，个人不是很喜欢这种风格。早期有免费版本的，后面就收费了，也没有再使用。
  • visual studio code 这个工具很强大，安装个markdown插件，然后就可以用了，配置方便，使用起来也还行。这个工具是一个堆编程人员很友好的工具，功能很多，很不简洁，如果你只是用来做markdown编辑，那有点浪费。
  • Jetbrains IDEA 本身是个集成的IDE，安装相关的插件，就可以进行markdown编辑，功能还行，插件比较丰富。这个工具比较大，用起来不是很方便，后面也放弃了。
  • VNote 一款开源免费的笔记本软件，基于QT框架开发的。用起来也不差，有资源管理器功能，可以导入markdown文档。不好的一点是这个工具的文档是安装vx.json来的，资源管理器显示也是按照这个文件来的，而且还有个db文件。在删除、移动、新增目录、打开某个文件夹之类的一些操作上并不是很友好，你需要去手动加载索引，需要手动将文件加入索引。
  • Jetbrains WriteSide 专门的文档编写软件，软件允许开发人员和编写人员在产品文档、API 参考、开发人员指南、教程和操作方法方面进行协作，基于人工智能的拼写检查和语法纠正工具，支持超过 25 种语言。个人当前正在使用的是这个，也还行，不算太差。这个对markdown预览不是太好，有些页面功能不能完全显示。

总之没有一款用的很顺手的工具，所以就想着能不能自己做一个，QT不会，而且那个做出来感觉界面可能不太好看。MFC的就不考虑的。网上看了下，electron这个框架很不错，visual studio code、WeChat、有道云笔记、印象笔记、钉钉、各类app的桌面程序都在使用这个框架，很热门。

二、功能预览（目标）

  • 支持markdown编辑和实时预览
  • 支持文档资源管理器功能
  • 主题、插件、快捷输入
  • 支持数学公式、mermaid、PlantUml渲染
  • 支持mkdocs的material主题部分功能，选项卡、告警
  • 支持表格编辑器
  • 支持本地数学公式、mermaid、PlantUml编辑窗口
  • 支持本地简单的绘图功能

三、参考

四、开源软件选型

4.1 Electron

4.2 Markdown解析器

  • Remarkable 一个纯 JavaScript 的 Markdown 解析器，解析速度快而且易于扩展。100% 支持 Commonmark。
  • Marked: 一款可以编译和解析markdown的开源库，支持命令行、浏览器。它支持多种 Markdown 语法，并能够将 Markdown 文本转换为 HTML。它的文档丰富，使用简单。
  • CommonMark: 是由 John MacFarlane 开发的 Markdown 解析库。它严格遵循 Markdown 语法规范，具有很好的兼容性。CommonMark 可以将 Markdown 文本转换为 HTML，也可以将 HTML 文本转换为 Markdown
  • Markdown-it 一款功能强大的Markdown解析器，支持丰富的Markdown语法，能够轻松将Markdown文本转换为HTML格式。它拥有丰富的插件和配置选项，让你的文档编辑更加灵活多变。
  • Markdown-WASM 基于WebAssembly的开源Markdown解析库，由知名开发者rsms打造。它旨在提供一种轻量级、高效且易于集成的方式，用于在网页应用中渲染Markdown文本。 Markdown-wasm demo
  • Vue-Markdown 一个基于Vue的Markdown解析器。
  • vue-markdown-loader 一个用于加载 markdown 文件的 Webpack loader。
  • markdown-it-vue The vue lib for markdown-it.
  • Lute 一款结构化的 Markdown 引擎，支持 Go 和 JavaScript
  • Blackfriday 在Go中实现的Markdown处理器。当前支持HTML输出以及Smartypants扩展。
  • Markdown 鸿蒙平台的原生Markdown解析器

4.3 Vue

  • Vue2 文档 渐进式JavaScript 框架
  • Vue3 易学易用，性能出色，适用场景丰富的 Web 前端框架。
  • Vite 下一代前端开发与构建工具

4.4 代码编辑器

4.5 电子表格组件

  • Univer 是一套企业文档与数据协同解决方案，融合了电子表格、文档和幻灯片。
  • LuckySheet

4.6 mermaid回调组件

基于 JavaScript 的图表工具，可渲染 Markdown 启发的文本定义以动态创建和修改图表。

4.7 PlantUML支持

4.8 编译工具

五、功能实现备忘

5.1 菜单项

  • 文件菜单
    • 导入、导出支持html、pdf、docx、json、yaml 非必须功能，可以延后
    • 另存为功能 Ctrl + Alt +S
    • 历史记录功能，记录最近修改的文件非必须功能，可以延后
  • 编辑菜单
    • 撤销、恢复、复制、剪切、黏贴、删除，monaco-editor本身支持，非必须功能，可以延后
    • 查找、在文件中查找、在文件夹查找， 查找功能包含在文件中查找和在文件夹中查找，非必须功能，可以延后
    • 替换、在文件中替换、在文件夹中替换，替换功能包含在文件中替换和在文件夹中替换，非必须功能，可以延后
    • Ctrl + F 当前只支持在文档中查找和替换，后续看是否可以扩充功能，非必须功能，可以延后
  • 视图菜单
    • 全屏模式非必须功能，可以延后
    • 显示/隐藏文件资源管理器、显示/隐藏文章大纲，就是打开/关闭左侧窗口
    • 显示/隐藏行号非必须功能，可以延后
    • 显示/隐藏换行符、制表符非必须功能，可以延后
    • 折叠/展开标题，在编辑区显示折叠/展开，方便编辑非必须功能，可以延后
  • 模板菜单
    • 支持自定义模板和模板管理非必须功能，可以延后
  • 设置菜单
    • 系统设置：字体、编辑器背景色、主题等设置
    • 编辑器选择、默认monaco-editor
    • markdown解析器，默认markdown-it，支持选择remarkable、marked、commonmark.js
  • 工具菜单
    • 电子表格编辑
    • 简单的绘图工具
    • mermaid绘图
  • 插件菜单
    • 引用网页工具，集成在本地工具上
    • 支持选择在浏览器中打开，还是在本地工具打开
  • 帮助菜单
    • 版本发布信息
    • 键盘快捷方式查询/设置菜单
    • 使用文档，简单的指导
    • 提交创意、issue
    • 主页
    • 致谢 各个开源软件
    • 检查更新

5.2 左侧栏功能优化完善

  • 左侧native-tab
    • 当前从大纲切换回文件资源管理器时，资源管理器被重新渲染了，没有保持之前的状态
    • 大纲功能未实现
    • 增加绘图功能
    • 增加mermaid功能
  • （已解决）渲染区域中的连接，点击之后未跳转到浏览器页面，直接在app中打开了页面，而且无返回功能，在使用鼠标左侧后退键后退时，app返回到了刚打开的状态
    • 渲染区连接，在浏览器中打开，不在app中打开
    • 在app中打开后，想办法看是否能增加回退或者关闭按钮，返回后回答打开链接之前的状态
  • 渲染区右键功能
    • 完善从word、html、json、yaml文件导入
    • 完善复制、删除、剪切、黏贴基本功能
    • （已解决）完善重命名功能
    • 完善刷新功能，重新加载文件
    • 完善查找功能
    • 完善在资源管理器中打开功能

5.3 编辑器功能优化完善

  • 有序列表、无序列表，在换行的时候，如果上一行以列表开头，换行时自动增加列表头
  • 文字颜色、背景功能完善
  • 完成monaco-editor右键功能配置，支持插入各类图片、模板等
  • 完善编辑栏文字字体选择、字体大小选择、各个按钮功能完善
  • 完善各种快捷键处理Ctrl + B（加粗）、Ctrl + I（倾斜）、Ctrl + U（下划线）
  • （已解决）mermaid渲染完毕之后，窗口底部出现了多余部分
  • 编辑区域和渲染区域显示对齐
  • （已解决）Ctrl + V 保存图片功能