大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1.什么是 Milkdown

A plugin-driven WYSIWYG markdown Editor, inspired by Typora, built on top of prosemirror and remark.

Milkdown 是一款轻量但功能强大的所见即所得 Markdown 编辑器，其由两部分组成：

• 一个微型核心，提供插件加载器和各种内部插件
• 大量附加插件提供语法、命令和组件

Milkdown 可以启用或禁用任何开发者喜欢的自定义语法和功能，例如：表格、Latex 和工具提示，还支持创建自己的插件来扩展功能。

Milkdown 的典型功能包括：

• 所见即所得 Markdown： 以优雅的方式编写 markdown
• 主题化： 开发者可以创建自己的主题并将其发布为 npm 包
• 可靠 ：建立在 prosemirror 和 remark 之上
• 功能强大：支持 LaTeX 数学方程式、表格、协作、剪贴板、表情符号等几乎所有编辑器都支持的强大功能

目前 Milkdown 在 Github 通过 MIT 协议开源，有超过 10k 的 star、1k 的 fork、是一个值得关注的 WYSIWYG 前端 markdown 编辑器项目。

2.如何使用 Milkdown

开发者可以通过两种方式创建编辑器：

• 使用 @milkdown/kit 从头开始 构建自己的编辑器
• 使用 @milkdown/crepe，这是一个配置良好、开箱即用的编辑器

2.1 使用 @milkdown/kit

首先需要安装相应的依赖包：

npm install @milkdown/kit @milkdown/theme-nord

然后，使用通用语法创建一个简单的编辑器：

import { Editor } from "@milkdown/kit/core";
import { commonmark } from "@milkdown/kit/preset/commonmark";
import { nord } from "@milkdown/theme-nord";
import "@milkdown/theme-nord/style.css";

Editor.make().config(nord).use(commonmark).create();

接着下面使用历史插件为编辑器添加撤消和重做支持：

import { Editor } from "@milkdown/kit/core";
import { history } from "@milkdown/kit/plugin/history";
import { commonmark } from "@milkdown/kit/preset/commonmark";
import { nord } from "@milkdown/theme-nord";
import "@milkdown/theme-nord/style.css";
// 导入相应的主题
const milkdown = Editor.make()
  .config(nord)
  .use(commonmark)
  .use(history)
  .create()
  .then(() => {
    console.log("Editor created");
  });
// 销毁编辑器
milkdown.destroy();

2.2 使用 @milkdown/crepe

首先安装依赖包：

npm install @milkdown/crepe

接着通过下面的方式创建编辑器：

import { Crepe } from "@milkdown/crepe";
import "@milkdown/crepe/theme/common/style.css";
// 可用主题
// 支持 frame、classic、nord、frame-dark、classic-dark、nord-dark
import "@milkdown/crepe/theme/frame.css";
const crepe = new Crepe({
  root: document.getElementById("app"),
  defaultValue: "Hello, Milkdown!",
});
// 创建编辑器
crepe.create().then(() => {
  console.log("Editor created");
});
// 销毁编辑器
crepe.destroy();

3.使用插件扩展 Milkdown 功能

Milkdown 中的所有功能均由插件提供，例如：语法、组件等，使用起来也非常简单：

import { Editor } from "@milkdown/kit/core";
import { slash } from "@milkdown/kit/plugin/slash";
import { tooltip } from "@milkdown/kit/plugin/tooltip";
import { commonmark } from "@milkdown/kit/preset/commonmark";
// 使用插件
Editor.make().use(commonmark).use(tooltip).use(slash).create();

开发者还可以通过编程来轻松切换插件：

import { Editor } from "@milkdown/kit/core";
import { someMilkdownPlugin } from "some-milkdown-plugin";

const editor = await Editor.config(configForPlugin)
  .use(someMilkdownPlugin)
  .create();
// 移除插件
await editor.remove(someMilkdownPlugin);
// 移除配置
editor.removeConfig(configForPlugin);
// 添加其他插件
editor.use(anotherMilkdownPlugin);
// Recreate the editor to apply changes.
await editor.create();

参考资料

https://github.com/Milkdown/milkdown

https://milkdown.dev/docs/guide/getting-started

https://beta.js.wiki/blog/2023-wiki-js-3-feature-preview-markdown-editor