大家好，很高興又見面了，我是"進階前端‬進階‬"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發，您的支援是我不斷創作的動力。

什麼是 Rooster

Rooster is a framework-independent JavaScript rich-text editor neatly nested inside one HTML <div> element. Editing operations performed by end users are handled in simple ways to generate the final HTML.

Rooster 是一個獨立于架構的 JavaScript 富文本編輯器，用于嵌套在一個 HTML元素中。最終使用者執行的編輯操作以簡單的方式處理并生成最終的 HTML。

Rooster 在名為 “内容模型” 的中間層資料結構之上工作。所有格式 API 和編輯操作都使用此内容模型層作為内容格式，最後轉換為 HTML 并在編輯器中顯示。Rooster 包含 6 個基本包:

roosterjs：為想要快速入門的使用者提供所有 Rooster 代碼的外觀。開發者可以使用 roosterjs 中的 createEditor() 函數建立具有預設配置的編輯器。
roosterjs-content-model-core：定義核心編輯器和插件基礎結構。使用 roosterjs-content-model-core 而不是 roosterjs 來建構和自定義自己的編輯器。
roosterjs-content-model-api：定義編輯器操作的 API。使用這些 API 修改使用 roosterjs-content-model-core 建構的編輯器中的内容和格式。
roosterjs-content-model-dom：定義内容模型和 DOM 操作的 API。此包在 DOM 樹和 roosterjs 内容模型之間進行轉換。
roosterjs-content-model-plugins：定義常用功能的基本插件。
roosterjs-content-model-types：定義公共接口和枚舉，包括内容模型類型、API 參數和其他類型。

目前 Rooster 在 GIthub 通過 MIT 協定開源，短短時間内已經有超過 1k 的 star、是一個值得關注的前端開源項目。

如何使用 Rooster

首先需要安裝相應的依賴：

yarn add roosterjs
// 安裝主包
yarn add roosterjs-content-model-core
yarn add roosterjs-content-model-api
// 安裝子包
yarn add webpack -g
// 安裝 webpack

Rooster 的使用非常簡單，比如下面的示例:

import {Editor} from 'roosterjs-content-model-core';
const editor = new Editor(div, {
    defaultSegmentFormat: {
        fontSize: '10pt',
    },
    plugins: [new MyPlugin(), ...],
    initialModel: {
    }
});

Rooster 還支援插件，開發者可以使用内置插件或自行建構插件，插件調用 API 與編輯器進行通信。當使用者執行操作或通過代碼更改内容時，編輯器将觸發事件以供插件處理。

// 在編輯器中鍵入 “a” 時，将顯示 “Hello Rooster” 對話框
class HelloRooster implements EditorPlugin {
    getName() {
        return 'HelloRooster';
    }
    initialize(editor: IEditor) {}
    dispose() {}
    onPluginEvent(e: PluginEvent) {
        // 判斷按鍵的 code 是否是 65
        if (e.eventType == 'input' && e.rawEvent.which == 65) {
            alert('Hello Rooster');
        }
    }
}

開發者還可以調用 dispose(); 來銷毀執行個體，一旦編輯器被釋放，就無法重新啟用同一個編輯器對象。但開發者可以再次使用同一個内容 DIV 調用 createEditor() 或 new Editor() 來使其可編輯，進而能夠在可編輯模式和不可編輯模式之間切換内容 DIV。例如：

class EditorWrapper {
    private editor: Editor;
    constructor(
        private contentDiv: HTMLDivElement,
        private plugins: EditorPlugin[]
    ) {
        this.enableEditing();
    }
    public enableEditing() {
        if (!this.editor) {
            this.editor = createEditor(this.contentDiv, this.plugins);
        }
    }
    public disableEditing() {
        if (this.editor) {
            this.editor.dispose();
            this.editor = null;
        }
    }
}

更多關于Rooster的用法和示例可以參考文末資料，本文不再過多展開。

參考資料

https://github.com/Microsoft/roosterjs

https://github.com/Microsoft/roosterjs/wiki/Dispose-an-editor

https://microsoft.github.io/roosterjs/index.html

https://github.com/microsoft/roosterjs/wiki/RoosterJs-9

微軟下一代架構無關 RoosterJS 富文本編輯器強勢來襲！

什麼是 Rooster

如何使用 Rooster

參考資料