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...

相关推荐
十一吖i8 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年9 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_10 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891112 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾14 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking14 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu16 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym21 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫22 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫26 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js