大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。
![](http://image.uc.cn/s/wemedia/s/upload/2024/c164a6a8154fa49be4c70c25f004721c.jpg)
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。
![](http://image.uc.cn/s/wemedia/s/upload/2024/c73b000f7f450ede44ab2a5fce5b999d.png)
![](http://image.uc.cn/s/wemedia/s/upload/2024/c6cc104c61d7dd3cb780a08541845b4c.jpg)
![](http://image.uc.cn/s/wemedia/s/upload/2024/948ec027771213ddbabafb042da10cf8.png)
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-coreyarn add roosterjs-content-model-api// 安装子包yarn add webpack -g// 安装 webpackRooster 的使用非常简单,比如下面的示例:
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