对于创作平台来说内容编辑器是十分重要的功能，强大的编辑器可以让创作者专注于创作“笔”下生花。而最好取悦程序员创作者的方法之一就是支持Markdown写作，因为大多数程序员都是用Markdown来写文章。
Markdown作为程序员写作的心头爱，有很多优点：
通过语法实现排版，不需要点选手动设置样式快速实现复杂内容，如：代码块、超链接、公式等让创作者有更多时间专注于内容
但，同样的也有些缺点：
有一定的学习门槛，对于非程序员不太友好看原文档就像看“代码”，预览效果需要工具或编辑器支持
那有没有能够即保留Markdown带来的便利，同时又降低门槛的办法呢？大多数老玩家会脱口而出：Typora
Typora直接使用完全没有问题，但由于它没有开源。如果想在自己的项目实现类似的Markdown编辑器，就需要另寻方案了。
如果你正在寻找功能强大、易于接入、所见即所得的Markdown编辑器、组件、插件，就请花5分钟读完本文！
接下来HlloGitHub带来的开源项目完全满足上述需求。Milkdown一款高颜值+自由（插件）的所见即所得，集合Markdown编辑器、组件、插件于一身的开源项目。
你想要的功能它都有，不要的功能也可以通过删减插件，减少体积。插件的设计思想+完善的中文文档，让你分分钟定制出最适合自己的Markdown编辑器！
下面跟着项目作者一起来感受Milkdown的魅力吧。
一、上手
下面提供了2种方式，可直接体验：
在线尝试、VSCod插件
1.1功能展示
方便的编写表格：
直接粘贴和复制Markdown文本：
甚至协同编辑：
双栏Markdown编辑器很常见。但双向绑定的Markdown编辑器，目前仅此一家：
功能方面就介绍这么多，下面用Milkdown轻松实现个编辑器。
1.2第一个编辑器
Milkdown的核心以及各种插件都是独立的NPM包，可以直接通过NPM来进行安装。
我们先使用mak来初始化编辑器，然后使用us来加载插件，最后使用crat来创建编辑器。
1.丰富的插件
插件是Milkdown的核心，它本质上就是一个插件加载器，一切功能都是通过插件来提供的。表格是一个插件、主题是一个插件、甚至一行简单的文本也是一个插件。
目前官方已经提供了许多插件，确保可以开箱即用。下面仅列举了部分插件：
也可以自己动手编写插件，更多详情
二、技术栈
Milkdown基于下面的工具实现：
Prosmirror：一个用于在wb端构建富文本编辑器的工具包Rmark：正确的Markdown解析器TypScript：以TypScript编写Emotion：用于构建样式的强大的cssinjs工具Prism：代码块支持Katx：高性能的渲染数学公式
富文本编辑器本身是一个天坑。虽然ContntEditabl看起来很美好，但实际用起来就会发现问题层出不穷。因此我们基于Prosmirror来实现富文本编辑器。因为它足够成熟、久经工业的锤炼，并且拥有良好的架构和API设计。
三、架构
Prosmirror的核心逻辑其实类似于Ract，它通过一种函数式的数据映射来体现编辑器的UI和内部状态的关系，如图：
编辑器通过EditorStat来保存当前状态，并由EditorStat产生出EditorViw，即UI视图。用户在UI视图上进行的操作最终会产生DOMvnt，例如：input事件、click事件。DOMvnt事件会产生Transaction，代表了对Stat的修改，类似于Rdux或Vux中的Action。这些Transaction会与原来的EditorStat进行计算，产生新的EditorStat，如此循环。
Prosmirror通过这样的方式将编辑器中的每个状态以EditorStat的方式保存了下来，它是一颗树状结构。而有一点编译原理基础的朋友都知道，任何编程语言都有对应的AST（抽象语法树）。因此我们需要的就是建立Prosmirror中的EditorStat与Markdown的抽象语法树之间的联系。Rmark完美契合我们的需求，因为它有设计良好的AST，并且易于扩展自己的语法。
这样一来Milkdown的架构也逐渐清晰：
Markdown-RmarkAST-ProsmirrorStat-UI
四、结语
在开始这个项目前，我尝试过各种各样的Markdown编辑器，但没有找到一款特别满意的。因为它们都是闭源，而且功能由开发商提供，有的功能太过于臃肿、有的又太过简单。既然这样，我索性自己做一款能够轻松定制功能，非程序员也能轻松使用的Markdown编辑器，也就有了大家看到的Milkdown。
希望开源的Milkdown让用户有更自由的选择，打破Markdown编辑器的“垄断”。开源不易如果Milkdown对您有帮助，也请给个Star。
最后，感谢HlloGithub的支持和帮助。Milkdown先是有幸入选了第65期月刊，然后受邀合作了这篇文章，让更多人知道我的开源项目。
转载请注明：http://www.0431gb208.com/sjszlff/5074.html
