Microsoft's next-generation framework, the unrelated RoosterJS rich text editor, is coming!

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

What is 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 is a framework-independent JavaScript rich text editor for nesting within an HTML element. The edits performed by the end user are processed in a simple way and the final HTML is generated.

Rooster works on top of a middle-tier data structure called the Content Model. All formatting APIs and editing operations use this content model layer as the content format, which is finally converted to HTML and displayed in the editor. Rooster contains 6 basic packages:

• roosterjs: Provides the look and feel of all Rooster code for users who want to get started quickly. Developers can use the createEditor() function in roosterjs to create an editor with default configurations.
• 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 参数和其他类型。

At present, Rooster is open-sourced through the MIT protocol on GIthub, and has more than 1k stars in a short period of time, which is a front-end open source project worth paying attention to.

How to use Rooster

First, you need to install the corresponding dependencies:

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

Using Rooster is very simple, as shown in the following example:

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

Rooster also supports plugins, which developers can use built-in plugins or build their own, and plugins call APIs to communicate with the editor. When a user performs an action or changes something through code, the editor will trigger an event for the plugin to process.

// 在编辑器中键入 “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');
        }
    }
}           

Developers can also call dispose(); to destroy the instance, once the editor is freed, the same editor object cannot be re-enabled. However, developers can use the same content DIV again to call createEditor() or new Editor() to make it editable, allowing them to switch between editable and non-editable modes. For example:

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;
        }
    }
}           

For more information about the usage and examples of Rooster, please refer to the material at the end of this article, which will not be expanded into too much in this article.

Resources

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