两栏 Markdown 编辑器很常见。 但目前只有一种具有单向绑定的 Markdown 编辑器：
这就是关于功能的全部内容。 让我们使用 Milkdown 轻松实现一个编辑器。
1.2 第一编辑器
Milkdown的核心和各种插件都是独立的NPM包，可以直接通过NPM安装。
npm i @milkdown/core @milkdown/preset-commonmark @milkdown/theme-nord
入门也非常简单：
import { Editor } from '@milkdown/core';
import { nord } from '@milkdown/theme-nord';
import { commonmark } from '@milkdown/preset-commonmark';
Editor
.make()
.use(nord)
.use(commonmark)
.create();
我们首先使用make初始化编辑器，然后使用use加载插件，最后使用create创建编辑器。
1.3 丰富的插件
插件是 Milkdown 的核心。 它本质上是一个插件加载器，所有功能都是通过插件提供的。 表格是插件，主题是插件，甚至简单的一行文本也是插件。
目前官方已经提供了很多插件，保证开箱即用。 下面仅列出部分插件：
名称说明
插件剪贴板
添加 Markdown 格式的复制粘贴功能
插件光标
添加放置和间隙光标
插件监听器
添加窃听器支持
插件协作
添加了协作编辑支持
插件表
添加表句支持（已包含在 gfm 中）
插件棱镜
添加prism支持代码块高亮
2. 技术栈
Milkdown是基于以下工具实现的：
富文本编辑器本身就是一个污水坑。 其实ContentEditable看起来很漂亮，但是在实际使用中，你会发现问题接二连三地出现。 为此，我们实现了一个基于Prosemirror的富文本编辑器。 因为它足够成熟，经过了长时间的工业测试，并且有良好的架构和API设计。
3. 架构
虽然Prosemirror的核心逻辑与React类似，但它使用了函数式数据映射来突出编辑器的UI和内部状态之间的关系，如图所示：
编辑器使用EditorState保存当前状态，EditorView由EditorState形成，也就是UI视图。 用户对UI视图的操作最终会形成DOMevent，比如输入风暴、点击风暴。 DOMevent 风暴会形成 Transactiontypescript编写表格插件，代表 State 的变化，类似于 Redux 或 Vuex 中的 Action。 该Transaction将与原始EditorState一起评估以形成新的EditorState，依此类推。
这样，Prosemirror以EditorState的形式保存了编辑器中的每个状态，这是一个树形结构。 对编译原理有一定基础了解的同学都知道，任何编程语言都有对应的AST（具体句子树）。 为此，我们需要的是建立Prosemirror中的EditorState与Markdown的具体句子树之间的关系。 Remark 非常符合我们的需求，因为它有一个精心设计的 AST，并且很容易扩展你自己的句型。
这样，Milkdown的结构就逐渐清晰起来：
MarkdownRemarkASTProsemirrorStateUI
4。结论
在开始这个项目之前，我尝试了各种 Markdown 编辑器，但没有找到一个让我非常满意的。 由于都是闭源的，但功能都是开发者提供的，所以有的功能过于臃肿typescript编写表格插件，有的又过于简单。 既然如此，我干脆做了自己的Markdown编辑器，可以轻松定制功能，非程序员也能轻松使用，这就是你看到的Milkdown。
我们希望开源的Milkdown能让用户有更自由的选择，打破Markdown编辑器的“垄断”。 开源并不容易。 如果Milkdown对您有帮助，请给它一个star✨。
最后感谢HelloGithub的支持和帮助。 Milkdown 有幸入围季刊，随后受邀合作撰写这篇文章，让更多人了解我的开源项目。
-结尾-
