簡介

Lexical 可以輕松創(chuàng)建復(fù)雜的文本編輯體驗(yàn)，否則使用內(nèi)置瀏覽器工具會非常復(fù)雜，比如可以用來構(gòu)建這些：

• 比 a 標(biāo)簽有更多要求的簡單純文本編輯器 textarea，例如定義表情符號、鏈接、主題標(biāo)簽等功能
• 更復(fù)雜的富文本編輯器，可用于在博客、社交媒體、消息傳遞應(yīng)用程序上發(fā)布內(nèi)容
• 一個(gè)成熟的 WYSIWYG 編輯器，可用于 CMS 或富文本編輯器
• 結(jié)合上述特點(diǎn)的實(shí)時(shí)協(xié)作文本編輯

Lexical 具有以下特點(diǎn)：

• 可靠性。Lexical 由每個(gè)附加到單個(gè)內(nèi)容可編輯元素的編輯器實(shí)例組成，一組編輯器狀態(tài)代表編輯器在任何給定時(shí)間的當(dāng)前和待定狀態(tài)。
• 可訪問性。Lexical 遵循 WCAG 中建立的最佳實(shí)踐，并與屏幕閱讀器和其他輔助技術(shù)兼容
• 效率高。它不直接關(guān)注 UI 組件、工具欄或富文本功能和 markdown，這些功能的邏輯可言通過插件接口包含在內(nèi)

支持以下瀏覽器：

• Firefox 52+
• Chrome 49+
• Edge 79+
• Safari 11+
• iOS 11+ (Safari)
• iPad OS 13+ (Safari)
• Android Chrome 72+

項(xiàng)目地址：

https://github.com/facebook/lexical

幾個(gè)重要的概念

編輯器實(shí)例

編輯器實(shí)例是將所有東西連接在一起的核心，可以將 contenteditable DOM 元素附加到編輯器實(shí)例上，注冊和監(jiān)聽命令，更重要的是，編輯器允許更新其自身的 EditorState。

// 創(chuàng)建編輯器實(shí)例
createEditor()

編輯器狀態(tài)

編輯器狀態(tài)表示你希望在 DOM 上顯示的內(nèi)容的底層數(shù)據(jù)模型，包含兩部分：

• Lexical 節(jié)點(diǎn)樹
• Lexical 選定器對象。編輯器狀態(tài)一旦創(chuàng)建就不可更改，可以使用以下方法進(jìn)行創(chuàng)建：

editor.update(() => {...})

可以將節(jié)點(diǎn)轉(zhuǎn)換或命令處理程序作為鉤子掛到 update 方法中，它們將作為更新流程的一部分而被調(diào)用，以防止更新的級聯(lián)/瀑布式更新。

// 獲取當(dāng)前編輯器狀態(tài)
editor.getEditorState()
// 編輯器狀態(tài)可以被序列化成 JSON，通過該方法將 JSON 轉(zhuǎn)換回實(shí)例對象
editor.parseEditorState()

編輯器更新

如果想要更改編輯器狀態(tài)中的某些內(nèi)容，必須通過更新操作來完成：

editor.update(() => {...})

傳遞給更新調(diào)用的閉包很重要，這是一個(gè)擁有活動中編輯器狀態(tài)完整上下文的地方，它公開了對底層編輯器狀態(tài)節(jié)點(diǎn)樹的訪問。

DOM 協(xié)調(diào)器

Lexical 有自己的 DOM 協(xié)調(diào)器，它采用一組編輯器狀態(tài)（總是“當(dāng)前”和“待定”）并在它們上應(yīng)用“差異”。然后它使用此差異僅更新 DOM 中需要更改的部分，可以將其視為一種虛擬 DOM，使得 Lexical 能夠跳過許多差異比較工作，因?yàn)樗涝诮o定更新中發(fā)生了哪些變化。

監(jiān)聽器、節(jié)點(diǎn)轉(zhuǎn)換和命令

除了調(diào)用更新之外，使用 Lexical 完成的大部分工作是通過監(jiān)聽器、節(jié)點(diǎn)轉(zhuǎn)換和命令完成的。這些操作都來自編輯器實(shí)例，以 register 開頭。另一個(gè)重要特性是所有注冊方法都返回一個(gè)函數(shù)以輕松取消訂閱它們。

const unregisterListener = editor.registerUpdateListener(({editorState}) => {
  console.log(editorState);
});

unregisterListener();

命令是用于將 Lexical 中的所有內(nèi)容鏈接到一起的通信系統(tǒng)，當(dāng)按鍵被觸發(fā)或其他重要信號出現(xiàn)時(shí)，語法在內(nèi)部調(diào)度命令，傳入的命令按優(yōu)先級通過所有處理程序進(jìn)行傳播，類似于瀏覽器的時(shí)間傳播機(jī)制

// 創(chuàng)建自定義命令
createCommand()
// 發(fā)送到編輯器實(shí)例
editor.dispatchCommand(command, payload)
// 也可以直接注冊命令
editor.registerCommand(handler, priority)

一個(gè)簡單的例子

這個(gè)例子可以用來創(chuàng)建一個(gè)簡單的富文本編輯器：

import "./styles.css";
import Editor from "./Editor";

export default function App() {
  return (
    

      
Rich Text Example

      
Note: this is an experimental build of Lexical

      
      

        
Other Examples

        

          

                          
              target="_blank"
              rel="noreferrer"
            >
              Plain text example
            
          

        

      

    

  );
}

名稱欄目：9.6K Star！可擴(kuò)展的富文本編輯框架！
文章網(wǎng)址：http://fisionsoft.com.cn/article/ccsjdhg.html