代码拉取完成，页面将自动刷新
为什么说 "又" 做了一个呢？早在 2022 年年初的时候，趁着公司的项目开发不紧张的时候，业余用 Vditor 搞了一个桌面 Markdown 编辑器。把开发经历整理发到了社区，反响很好，有感兴趣的小伙伴 Star 和 Fork 了代码，提了一些好的建议。同时个人对这款编辑器长达 10 个多月的使用体验里，也发现了很多使用上不习惯的地方，为了解决这些问题，查了很多资料，有些可以解决，有些是真的没办法。
首先，Vditor 有点太强大了，尤其 实时渲染 和 WYSIWYG (所见即所得) 的支持上，对于这个项目的魔改，以目前自己在前端上的技术实力来说，还不足以改得太深入，二开工作也只是停留在了对主题样式和一些相关配套功能上的集成而已。例如生成 PDF、打开本地 Md 文件、Markdown 图片管理、提供文章内搜索等等，这些我想要的功能，暂时还没法通过自己当前的技术能力在 Vditor 上得到实现。
其次，作为一名开发人员，绝大部分的笔记都是要记录代码的，然而，Vditor 在代码输入和修改过程中的体验实在是太不好了。
Vditor 在实时渲染下的代码的查看和输入时断开的，代码示例一旦变长，修改代码时的体验就非常的不好，都会界面会跳来跳去的。然而，这个功能也是我暂时还魔改不了的。
最后就是所有 Markdown 编辑器都绕不开的实时渲染性能问题，即便是这次基于 v-md-editor 重新设计的编辑器，其实也不能很好的解决这个问题。一方面一开始在做技术选型的时候，我的需求就是需要一个能像 Typora 那样的编辑器，Vditor 正好主打的就是 实时渲染 和 WYSIWYG，因此一开始即便是编辑器有因为渲染问题导致的卡顿啊什么的都是觉得可以接受的，毕竟它解决了我当时最急切的痛点。但后来，当使用的频率越来越高，对它的要求也就越来越高了，渲染性能就成了绕不开的难题。加之 Vditor 原生支持了过多的渲染插件 (语法) —— 折线图、时序图、甘特图、折线图、五线谱等等在个人的实际使用过程中往往不如通过截图来呈现的效果更好，反而会因此而导致输入体验变差 (🤔 插入的图表多了，实时渲染就太卡了)，实际使用的频率非常低。(🥰 功能是很多很全且非常好的，只是对于我来说有点太多了 🙈)
因此，为了解决 Markdown 笔记体验上所遇到的所有问题，再次踏上了魔改的道路。
原本计划是自研 Markdown 引擎的 (你瞧瞧这说的是人话嘛 😷)，不过还别说，真被我鼓捣出了识别段落的算法。
虽然简单，基本上可以对 Markdown 内容里的段落进行解析了，假以时日，说不定三五年的也能琢磨出个什么来。但对比开源社区里大牛们已经研究出来的成品引擎，比起自己埋头搞研发，实现起来的进度实在是太慢了，以我的能力，就算做出了解析的引擎，相关配套的功能和效果以及插件生态也没法跟已经成熟的产品 (例如: markdown-it) 相提并论，也有悖我单纯想快速要做一个能用的笔记软件的初心。结合年初的版本，以及个人使用 Markdown 码字的体验和痛点，重新思考了自己的需求。
Typora、思源笔记、MarkText 等产品在 WYSIWYG 场景下的应用非常出色，也是这个小项目未来进化的目标。根据需求以及上一版出现过的问题，这次的选型方向是这样的：
比较成熟且好用的 WYSIWYG 的开源项目目前 Yogurt 只找到了一个，就是 Vditor，但这次又不想用它，后面想起了 VSCode 里的 Markdown 解析器是基于 markdown-it 开发的，那其实也可以选择它作为核心组件。然而，试用了一段时间后发现，需要二开魔改的地方太多了，时间精力和技术实力也不允许我搞那么多的二开，那就找找有没有基于此开发的编辑器了。最终在 N 多款基于 markdown-it 的编辑器组件里选择了本项目的核心组件 v-md-editor。选择它的原因：
markdown-it 开发而来，支持自定义添加所有基于 markdown-it 的插件。符合 易于拓展 这一条CodeMirror 二开的代码编辑器组件，编码区的样式可以做到样式更丰富。符合 好看 这一条既然核心的组件都是基于 Node.js 开发的了，自然整个项目都是要在 Web 端来实现了。桌面端的离线 Web 项目，自然还是 Electron 了。本来是想尝试一下用 Tauri 的，结果部署那一关就很难过了，迟迟解决不了部署和配置问题，然后就放弃了。
没了，本次项目全部都在 Vue3 + TS + Electron 中实现。
国际惯例先上图，各位小伙伴们多多指教。
完整样式
纯编辑器样式
图片预览
查找功能
Markdown All in One) 转成 PDF。后面有段时间就直接用 VSCode 来写 Markdown 了，也是这段时间对分离式的 Markdown 写法有感兴趣了的。| 信息 | 说明 |
|---|---|
| 操作系统 | Microsoft Windows 11 专业工作站版 |
| 开发工具 | Visual Studio Code |
| v-md-editor 版本 | 2.3.15 |
| CodeMirror 版本 | 5.65.9 |
| Vue 版本 | 3.0.0 |
| Electron 版本 | 20.0.0 |
| TypeScript 版本 | 4.1.5 |
| Node 版本 | 16.13.1 |
| NPM 版本 | 8.1.2 |
| CNPM 版本 | 7.1.0 |
如果上次开发是小试牛刀的话，那么这次就算是渐入佳境了。说实话，一开始真的想自己搞解析引擎来着，后面发现自己开发的效率实在太低了，出来的效果也仅仅是勉强达到及格线而已。更别说后面还有很多交互性的功能要做了。如果仅仅是自己在这埋头苦干的话，不知道猴年马月才能使上自己的产品。更可怕的是，已经成熟的产品进化的速度比我学习的速度更快。所以就秉持着 "站在巨人的肩膀上前行" 的心态做这次的魔改开发。
魔改的需求就是来源于我自己对 Markdown 的使用习惯了。
HarmonyOSSans (免费商用)，避免后期支持 PDF 输出内容时可能会引起的字体版权纠纷 (谁知道呢，万一火了呢🙈)。其次是因为这个字体确实好看，可读性挺强的，尤其是在 粗体 的显示上相较于微软雅黑来说更加凸显。( 冷知识：微软雅黑字体如果打印出来的话其实是要版权的 )CodeMirror (编辑器) 对 Markdown 语法的主题样式，能够在不开启实时预览的情况下能直观的查看语法的样式情况，兼顾内容编辑输入的流畅性。v-md-editor 对 xss 的输入限制。说实话，v-md-editor 里的 xss 规则真的很严格，尤其是对链接路径。为了处理这个问题，我还把源码下下来魔改了之后重新编译的。不然根本没法在这个编辑器里引用本地图片。Element-Plus 里薅了一个 ElImageView 组件过来，魔改了样式之后实现的。codemirror-search-replace) 下下来魔改了。哪里不喜欢就改哪里😄😄😄
这次项目相对来说最麻烦的就数输出 PDF 了。以前只知道在浏览器里把网页打印成 PDF，这一下要把这玩意儿集成到软件里头反倒是不会了。后面有查到一个好用的工具 —— Puppeteer。全网都说好，我把它集成进来后，确实打印效果不错，但当我一看打包好的包，整个文件夹的容量赫然写着 465 MB 的时候，我麻了。要是再加上 Electron 本身的 257 MB，整个项目我啥也没干，就快 1 个 G 了，都快赶上 Win7 的安装包了。人家实现一个操作系统，我就输出个 PDF...😳😳😳。
后来找了半天都没找到合适的解决方案时，不小心在 Electron 里发现了 printToPDF 的方法，一下子就通了，花了点时间看了一下文档，改完 Markdown 转 Html 的输出文件内容样式后，就调用这个接口直接输出 PDF 了，效果还阔以。
就是功能简单了点，能实现最基本的打印需求，更复杂的就不行了，不过好在 Markdown 本身也不需要太复杂的呈现形式，能用。
相比起上一次的开发，这次其实有了很多参照。近一年多以来，不论是公司的项目还是个人的项目，自己在二开上也有了一些经验，应付起来也没有之前那么头疼了。
相比于上一次，这一次除了关注技术层面满足感外，更关心整个项目在使用上的完整度。比如这个项目从写 Markdown 到保存，关闭后再打开，另存为以及输出 PDF 的全链路，按照实际的使用场景来开发项目，让项目更具有实用性。
于此同时也在这个项目里纠正了我曾经的一个错误观念，一直以来，都觉得不管是什么项目，都应该从零开始一个个码出来的代码才算得上是自己的，虽然这个观点非常正确，但却不太符合现实情况。当我们的成长速度跑不过信息爆炸的速度时，某些程度上我们即便是做了所谓的 "原创"，也赶不上时代，那么对这个产品的投资 (时间、人力、金钱) 就将会是失败的。除非你能找到另外一条与当下时代不同的，并且具有弯道超车可能的道路，如果单纯只是模仿，走前人所走过的道路，那永远也赶不上前人，更别说是继承了。比如说这个项目就是在模仿前人，只是想在模仿过程中删删减减，以达到自己学习开发思路目的的行为。
但，也并没有那么悲观。因为现代计算机世界的高楼大厦都是建立在前辈们开源的基础上，且有源源不断的开发人员前赴后继地添砖加瓦，计算机世界才能拥有如此惊人的辉煌成就。"站在巨人的肩膀上前行" 并不丢人，当有那么一群人和你的想法一致，并且能够以代码的形式体现时，这是幸福的。在合理合法的条件下，"排列组合" 有时也是一种创新。
初心不变，这篇文章依然是在新鲜出炉的 创云笔记 v1.1.4 中编写的。
排名不分先后
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手