对于创作平台来说内容编辑器是十分重要的功能|任由文字肆意流淌，更自由的开源 Markdown 编辑器( 二 )

目前官方已经提供了许多插件，确保可以开箱即用。下面仅列举了部分插件：

文章图片
也可以自己动手编写插件，更多详情
二、技术栈
Milkdown基于下面的工具实现：Prosemirror：一个用于在web端构建富文本编辑器的工具包Remark：正确的Markdown解析器TypeScript：以TypeScript编写Emotion：用于构建样式的强大的cssinjs工具Prism：代码块支持Katex：高性能的渲染数学公式
富文本编辑器本身是一个天坑。虽然ContentEditable看起来很美好，但实际用起来就会发现问题层出不穷。因此我们基于Prosemirror来实现富文本编辑器。因为它足够成熟、久经工业的锤炼，并且拥有良好的架构和API设计。
三、架构
Prosemirror的核心逻辑其实类似于React ，它通过一种函数式的数据映射来体现编辑器的UI和内部状态的关系，如图：

文章图片
编辑器通过EditorState来保存当前状态，并由EditorState产生出EditorView ，即UI视图。用户在UI视图上进行的操作最终会产生DOMevent ，例如：input事件、click事件。 DOMevent事件会产生Transaction ，代表了对State的修改，类似于Redux或Vuex中的Action 。这些Transaction会与原来的EditorState进行计算，产生新的EditorState ，如此循环。
Prosemirror通过这样的方式将编辑器中的每个状态以EditorState的方式保存了下来，它是一颗树状结构。而有一点编译原理基础的朋友都知道，任何编程语言都有对应的AST（抽象语法树）。因此我们需要的就是建立Prosemirror中的EditorState与Markdown的抽象语法树之间的联系。 Remark完美契合我们的需求，因为它有设计良好的AST ，并且易于扩展自己的语法。
这样一来Milkdown的架构也逐渐清晰：
MarkdownRemarkASTProsemirrorStateUI
四、结语
在开始这个项目前，我尝试过各种各样的Markdown编辑器，但没有找到一款特别满意的。因为它们都是闭源，而且功能由开发商提供，有的功能太过于臃肿、有的又太过简单。既然这样，我索性自己做一款能够轻松定制功能，非程序员也能轻松使用的Markdown编辑器，也就有了大家看到的Milkdown 。
希望开源的Milkdown让用户有更自由的选择，打破Markdown编辑器的“垄断” 。开源不易如果Milkdown对您有帮助，也请给个Star? 。
最后，感谢HelloGithub的支持和帮助。 Milkdown先是有幸入选了第65期月刊，然后受邀合作了这篇文章，让更多人知道我的开源项目。
来源：HelloGitHub