9.6K Star！可擴展的富文本編輯框架！
簡介
Lexical 是一個可擴展的 JavaScript 網頁文本編輯器框架，強調可靠性、可訪問性和高性能，旨在提供一流的開發人員體驗，輕松地制作原型并充滿信心的構建功能。結合高度可擴展的架構，Lexical 允許開發人員創建在大小和功能上可擴展的獨特文本編輯體驗。
Lexical 可以輕松創建復雜的文本編輯體驗，否則使用內置瀏覽器工具會非常復雜，比如可以用來構建這些：
- 比 a 標簽有更多要求的簡單純文本編輯器 textarea，例如定義表情符號、鏈接、主題標簽等功能
- 更復雜的富文本編輯器，可用于在博客、社交媒體、消息傳遞應用程序上發布內容
- 一個成熟的 WYSIWYG 編輯器，可用于 CMS 或富文本編輯器
- 結合上述特點的實時協作文本編輯
Lexical 具有以下特點：
- 可靠性。Lexical 由每個附加到單個內容可編輯元素的編輯器實例組成，一組編輯器狀態代表編輯器在任何給定時間的當前和待定狀態。
- 可訪問性。Lexical 遵循 WCAG 中建立的最佳實踐，并與屏幕閱讀器和其他輔助技術兼容
- 效率高。它不直接關注 UI 組件、工具欄或富文本功能和 markdown，這些功能的邏輯可言通過插件接口包含在內
支持以下瀏覽器：
- Firefox 52+
- Chrome 49+
- Edge 79+
- Safari 11+
- iOS 11+ (Safari)
- iPad OS 13+ (Safari)
- Android Chrome 72+
項目地址：
https://github.com/facebook/lexical
幾個重要的概念
編輯器實例
編輯器實例是將所有東西連接在一起的核心，可以將 contenteditable DOM 元素附加到編輯器實例上，注冊和監聽命令，更重要的是，編輯器允許更新其自身的 EditorState。
// 創建編輯器實例
createEditor()
編輯器狀態
編輯器狀態表示你希望在 DOM 上顯示的內容的底層數據模型，包含兩部分：
- Lexical 節點樹
- Lexical 選定器對象。編輯器狀態一旦創建就不可更改，可以使用以下方法進行創建：
editor.update(() => {})
可以將節點轉換或命令處理程序作為鉤子掛到 update 方法中，它們將作為更新流程的一部分而被調用，以防止更新的級聯/瀑布式更新。
// 獲取當前編輯器狀態
editor.getEditorState()
// 編輯器狀態可以被序列化成 JSON，通過該方法將 JSON 轉換回實例對象
editor.parseEditorState()
編輯器更新
如果想要更改編輯器狀態中的某些內容，必須通過更新操作來完成：
editor.update(() => {})
傳遞給更新調用的閉包很重要，這是一個擁有活動中編輯器狀態完整上下文的地方，它公開了對底層編輯器狀態節點樹的訪問。
DOM 協調器
Lexical 有自己的 DOM 協調器，它采用一組編輯器狀態（總是“當前”和“待定”）并在它們上應用“差異”。然后它使用此差異僅更新 DOM 中需要更改的部分，可以將其視為一種虛擬 DOM，使得 Lexical 能夠跳過許多差異比較工作，因為它知道在給定更新中發生了哪些變化。
監聽器、節點轉換和命令
除了調用更新之外，使用 Lexical 完成的大部分工作是通過監聽器、節點轉換和命令完成的。這些操作都來自編輯器實例，以 register 開頭。另一個重要特性是所有注冊方法都返回一個函數以輕松取消訂閱它們。
const unregisterListener = editor.registerUpdateListener(({editorState}) => {
console.log(editorState);
});
unregisterListener();
命令是用于將 Lexical 中的所有內容鏈接到一起的通信系統，當按鍵被觸發或其他重要信號出現時，語法在內部調度命令，傳入的命令按優先級通過所有處理程序進行傳播，類似于瀏覽器的時間傳播機制
// 創建自定義命令
createCommand()
// 發送到編輯器實例
editor.dispatchCommand(command, payload)
// 也可以直接注冊命令
editor.registerCommand(handler, priority)
一個簡單的例子
這個例子可以用來創建一個簡單的富文本編輯器：
import "./styles.css";
import Editor from "./Editor";
export default function App() {
return (
<div className="App">
<h1>Rich Text Example</h1>
<p>Note: this is an experimental build of Lexical</p>
<Editor />
<div className="other">
<h2>Other Examples</h2>
<ul>
<li>
<a
href="https://codesandbox.io/s/lexical-plain-text-example-g932e"
target="_blank"
rel="noreferrer"
>
Plain text example
</a>
</li>
</ul>
</div>
</div>
);
}
