开源富文本编辑器Quill 2.0重磅发布

⬆️ 武汉源创会火热报名中开源富文本编辑器 Quill 正式发布 2.0 版本。

官方 TypeScript 声明

Quill 的源代码已完全过渡到 TypeScript，优势在于早期错误检测、改进的可维护性和更好的工具支持。

以往，开发人员必须 @types/quill 作为单独的包安装才能获取 TypeScript 定义。Quill 2.0 中，可以直接从源头获得类型声明。

多注册表

博客项目可能使用 Quill 为帖子本身提供全功能的编辑界面，包括标题、图像和代码块，而在同一页面上，Quill 还支持粗体、斜体的评论输入，以及支持的链接格式。

Quill 2.0 的新 registry 功能支持此用例，允许具有自己样式配置的多个编辑器在同一页面上共存，而不会发生任何冲突。

自动滚动容器检测

以往开发人员在创建 Quill 实例时需要指定编辑器的滚动容器，以便用户的光标或选择可以在需要时滚动到视图中。但这一配置经常被忽视或混淆，滚动容器要么被错误指定，要么根本没有指定。

此外，在较大的应用和代码库中，为可能出现在不同上下文中的可重用编辑器组件找到正确的滚动容器并不总是那么容易。

2.0 中，Quill 会自动找到正确的滚动容器，这使得使用 Quill 处理较长格式的文本变得更加容易，并支持更复杂的交互，例如自由嵌套滚动容器和水平滚动。

使用 InputEvent

Quill 的主要优势之一是内部管理的文档模型，它不依赖 DOM 作为单一事实来源。这为富文本状态提供了更接近开发人员心智模型的映射，并支持更简单的文本编辑 API。

Quill 通过监听 DOM 更改并将其标准化回其内部文档模型来实现此目的。但是，浏览器可能会不一致或错误地处理用户的操作，从而导致生成错误的 DOM 更改。例如，当用户选择红色文本并通过键入替换它时，浏览器有时会将其替换为属性 font 中包含红色的元素 style，即使编辑器使用 span 元素来表示颜色也是如此。

Quill 2.0 中，使用现代且常见的浏览器功能来触发 InputEvent。现在，首先捕获用户的操作以更新内部文档模型，然后再将结果更改同步到 DOM。这种方法提供了更加一致和可靠的编辑体验，尤其是对于复杂的内容和格式。

该功能目前专注于文本替换交互中最有问题的来源，并计划在未来更广泛地使用。

以下是 2.0 主要更新信息罗列：

重大改进

Quill 现在是一个有效的 ESM 包，以便更好地支持生态系统（例如，打包器）和树摇（tree-shaking）功能
支持嵌套 Quill
改进了输入法（IME）和拼写校正器的支持
对 TEXT_CHANGE 事件进行了语义清理
历史记录：在历史模块中记录选择
自动检测滚动容器
剪贴板：改进了从 Google Docs 和 Microsoft Word 粘贴的支持

性能提升

Quill 2.0 包含许多性能优化，其中最重要的是提高了渲染大量内容的速度。
提升插入性能
尽可能避免获取选择集
当容器为空时无需 setContents

代码现代化

迁移到 TypeScript
提供了官方 TypeScript 声明
迁移到 Vitest 进行单元测试
迁移到 Playwright 进行端到端测试
将网站迁移到 Gatsby

详情查看官宣，以及 2.0 迁移指南：

https://slab.com/blog/announcing-quill-2-0
https://github.com/quilljs/quill/releases/tag/v2.0.0
https://quilljs.com/guides/upgrading-to-2-0

BTW， Quill 2.0 核心开发者是 Zihua Li，这是他首个全职参与的开源项目。

延伸阅读：
中国程序员独立开发9年、最受欢迎的开源Redis客户端——被Redis公司收购