Quill 2.0 发布:引领富文本编辑体验新里程

自最初的 Quill 1.0 版本发布以来,见证了来自快速发展的初创公司、知名品牌和老牌财富 500 强公司的众多成功案例,这些公司已将 Quill 纳入其面向用户的产品的一些最重要和核心的部分。

在我们继承这一传统的基础上,这个新的 Quill 2.0 版本意识到无缝升级对于我们的开发人员社区的重要性,同时也提高了 Quill 的功能、可靠性和开发人员体验。

随着 Quill 2.0 的正式发布,Quill 的 GitHub 存储库已从上次发布 1.3.7 版本时的 23k star 增加到超过 38k star。

我们很高兴地宣布 Quill 2.0 的发布,这是为数百万用户推进网页编辑体验的一个重要里程碑。以下是我们在此过程中所做的一些重大改变。

TypeScript 支持

Quill 的源代码已完全迁移到 TypeScript,享受其在早期错误检测、改进的可维护性和更好的工具支持方面的所有优势。其结果是为 Quill 和开发者社区提供了更强大的代码库。

以前,开发人员必须 @types/quill 作为单独的包安装才能获取 TypeScript 定义。这可能不那么具体,有时甚至不符合 Quill 的实际类型,因为其由开发者社区维护,更新的时间和频率也没有与核心 Quill 包同步。

有了 Quill 2.0 之后,这种麻烦和出错的机会就消失了,你将直接从源头获得类型。只需从项目中删除 @types/quill 包,TypeScript 将自动直接从 Quill 中选择声明。

多个注册表

随着 Quill 的普及和使用的增长,我们开始更频繁地看到用例,有时甚至出现在同一页面上。

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

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

自动滚动容器检测

以前,开发人员在创建 Quill 实例时需要指定编辑器的滚动容器,以便用户的光标或选择可以在需要时滚动到视图中。

但我们发现这个配置经常被忽视或混淆,因此这个滚动容器要么被错误指定,要么根本没有指定。此外,在较大的应用程序和代码库中,为可能出现在不同上下文中的可重用编辑器组件找到正确的滚动容器并不总是那么容易。

在 2.0 中,Quill 会自动找到正确的滚动容器,因此你不再需要这样做。这使得使用 Quill 处理较长格式的文本变得更加容易,并支持更复杂的交互,例如免费的嵌套滚动容器和水平滚动。

使用输入事件

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

Quill 通过侦听 DOM 更改并将其标准化回其内部文档模型来实现此目的。但是,浏览器可能会不一致或错误地处理用户的操作,从而导致生成错误的 DOM 更改。

例如,当用户选择红色文本并通过键入替换它时,浏览器有时会将其替换为属性 font 中包含红色的元素 style,即使编辑器使用 span 元素来表示颜色也是如此。

在 Quill 2.0 中,我们使用现代且常见的浏览器功能来推进 InputEvent。现在,首先捕获用户的操作以更新内部文档模型,然后再将结果更改同步到 DOM。

这种方法提供了更加一致和可靠的编辑体验,尤其是对于复杂的内容和格式。该功能目前专注于文本替换交互中最有问题的来源,并计划在未来更广泛地使用。

Quill 2.0 背后

Quill 2.0 令人兴奋的新功能的背后也是其开发和支持的自然演变。开源生态系统的一个重要且长期存在的问题是可持续性。

不幸的是,这对于更广泛的行业来说仍然是一个悬而未决的问题。但 Quill 得到了一家盈利公司的支持,该公司的关键人员是相同的,并且激励措施也是一致的。

对于 Slab 来说,内容创建和协作是我们产品的支柱,我们努力在功能和易用性方面做到最好,这些价值观源于 Quill。

我们的帖子编辑器继续突破 Quill 的限制,而我们的评论输入和搜索栏则需要更有限的格式。在某种程度上,这些用例的经验教训激发了 2.0 中的基础和扩展功能。

参考链接:slab.com/blog/announ...

相关推荐
sg_knight7 分钟前
VSCode如何修改默认扩展路径和用户文件夹目录到D盘
前端·ide·vscode·编辑器·web
一个处女座的程序猿O(∩_∩)O17 分钟前
完成第一个 Vue3.2 项目后,这是我的技术总结
前端·vue.js
mubeibeinv17 分钟前
项目搭建+图片(添加+图片)
java·服务器·前端
逆旅行天涯24 分钟前
【Threejs】从零开始(六)--GUI调试开发3D效果
前端·javascript·3d
m0_748255261 小时前
easyExcel导出大数据量EXCEL文件,前端实现进度条或者遮罩层
前端·excel
长风清留扬1 小时前
小程序毕业设计-音乐播放器+源码(可播放)下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
web147862107231 小时前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247801 小时前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
青灯文案12 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http