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

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-darkimport "@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