源?/?? ? ? ??文/?

對于創(chuàng)作平臺來說內(nèi)容編輯器是十分重要的功能，強大的編輯器可以讓創(chuàng)作者專注于創(chuàng)作“筆”下生花。而最好取悅程序員創(chuàng)作者的方法之一就是支持 Markdown 寫作，因為大多數(shù)程序員都是用 Markdown 來寫文章。

Markdown 作為程序員寫作的心頭愛，有很多優(yōu)點：

• 通過語法實現(xiàn)排版，不需要點選手動設(shè)置樣式
• 快速實現(xiàn)復(fù)雜內(nèi)容，如：代碼塊、超鏈接、公式等
• 讓創(chuàng)作者有更多時間專注于內(nèi)容

但，同樣的也有些缺點：

• 有一定的學(xué)習(xí)門檻，對于非程序員不太友好
• 看原文檔就像看“代碼”，預(yù)覽效果需要工具或編輯器支持

那有沒有能夠即保留 Markdown 帶來的便利，同時又降低門檻的辦法呢？大多數(shù)老玩家會脫口而出：Typora

Typora 直接使用完全沒有問題，但由于它沒有開源。如果想在自己的項目實現(xiàn)類似的 Markdown 編輯器，就需要另尋方案了。

如果你正在尋找功能強大、易于接入、所見即所得的 Markdown 編輯器、組件、插件，就請花 5 分鐘讀完本文！

接下來 HelloGitHub 帶來的開源項目完全滿足上述需求。Milkdown 一款高顏值+自由（插件）的所見即所得，集合 Markdown 編輯器、組件、插件于一身的開源項目。

https://github.com/Saul-Mirone/milkdown

你想要的功能它都有，不要的功能也可以通過刪減插件，減少體積。插件的設(shè)計思想+完善的中文文檔，讓你分分鐘定制出最適合自己的 Markdown 編輯器！

下面跟著項目作者一起來感受 Milkdown 的魅力吧。

一、上手

下面提供了 2 種方式，可直接體驗：

在線嘗試：https://milkdown.dev/#/online-demo

VS Code 插件：https://marketplace.visualstudio.com/items?itemName=mirone.milkdown

1.1 功能展示

方便的編寫表格：

直接粘貼和復(fù)制 Markdown 文本：

甚至協(xié)同編輯：

雙欄 Markdown 編輯器很常見。但?雙向綁定?的 Markdown 編輯器，目前僅此一家：

功能方面就介紹這么多，下面用 Milkdown 輕松實現(xiàn)個編輯器。

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?來創(chuàng)建編輯器。

1.3 豐富的插件

插件是 Milkdown 的核心，它本質(zhì)上就是一個插件加載器，一切功能都是通過插件來提供的。表格是一個插件、主題是一個插件、甚至一行簡單的文本也是一個插件。

目前官方已經(jīng)提供了許多插件，確保可以開箱即用。下面僅列舉了部分插件：

名稱

描述

plugin-clipboard	添加 markdown 格式的復(fù)制粘貼能力
plugin-cursor	添加 drop 和 gap 光標(biāo)
plugin-listener	添加監(jiān)聽器支持
plugin-collaborative	添加協(xié)同編輯支持
plugin-table	添加表格語法支持（已經(jīng)包含在 gfm 中）
plugin-prism	添加 prism 用于支持代碼塊高亮

二、技術(shù)棧

Milkdown 基于下面的工具實現(xiàn)：

• Prosemirror：一個用于在 web 端構(gòu)建富文本編輯器的工具包
• Remark：正確的 Markdown 解析器
• TypeScript：以 TypeScript 編寫
• Emotion：用于構(gòu)建樣式的強大的 css in js 工具
• Prism：代碼塊支持
• Katex：高性能的渲染數(shù)學(xué)公式

富文本編輯器本身是一個天坑。雖然 ContentEditable 看起來很美好，但實際用起來就會發(fā)現(xiàn)問題層出不窮。因此我們基于 Prosemirror 來實現(xiàn)富文本編輯器。因為它足夠成熟、久經(jīng)工業(yè)的錘煉，并且擁有良好的架構(gòu)和 API 設(shè)計。

三、架構(gòu)

Prosemirror 的核心邏輯其實類似于 React，它通過一種函數(shù)式的數(shù)據(jù)映射來體現(xiàn)編輯器的 UI 和內(nèi)部狀態(tài)的關(guān)系，如圖：

編輯器通過 EditorState 來保存當(dāng)前狀態(tài)，并由 EditorState 產(chǎn)生出 EditorView，即 UI 視圖。?用戶在 UI 視圖上進行的操作最終會產(chǎn)生 DOM event，例如：input 事件、click 事件。DOM event 事件會產(chǎn)生 Transaction，代表了對 State 的修改，類似于 Redux 或 Vuex 中的 Action。?這些 Transaction 會與原來的 EditorState 進行計算，產(chǎn)生新的 EditorState，如此循環(huán)。

Prosemirror 通過這樣的方式將編輯器中的每個狀態(tài)以 EditorState 的方式保存了下來，它是一顆樹狀結(jié)構(gòu)。而有一點編譯原理基礎(chǔ)的朋友都知道，任何編程語言都有對應(yīng)的 AST（抽象語法樹）。因此我們需要的就是建立 Prosemirror 中的 EditorState 與 Markdown 的抽象語法樹之間的聯(lián)系。?Remark 完美契合我們的需求，因為它有設(shè)計良好的 AST，并且易于擴展自己的語法。

這樣一來 Milkdown 的架構(gòu)也逐漸清晰：

Markdown <-> Remark AST <-> Prosemirror State <-> UI

四、結(jié)語

在開始這個項目前，我嘗試過各種各樣的 Markdown 編輯器，但沒有找到一款特別滿意的。因為它們都是閉源，而且功能由開發(fā)商提供，有的功能太過于臃腫、有的又太過簡單。?既然這樣，我索性自己做一款能夠輕松定制功能，非程序員也能輕松使用的 Markdown 編輯器，也就有了大家看到的 Milkdown。

希望開源的 Milkdown 讓用戶有更自由的選擇，打破 Markdown 編輯器的“壟斷”。開源不易如果 Milkdown 對您有幫助，也請給個 Star?。

https://github.com/Saul-Mirone/milkdown

推薦閱讀

大學(xué)城情侶賓館花樣真多，荷爾蒙的味道！

程序員踩點上下班，被HR約談，網(wǎng)友：錯了嗎？

男女洗澡前后區(qū)別，太形象了！
END

頂級程序員：topcoding

做最好的程序員社區(qū)：Java后端開發(fā)、Python、大數(shù)據(jù)、AI

一鍵三連「分享」、「點贊」和「在看」