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

什么是 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

参考资料