ngx-quill 中 preserveWhitespace 功能在 Quill v2 中的变化与解决方案

ngx-quill 是一个流行的 Angular 富文本编辑器组件，基于 Quill.js 构建。在最新版本中，用户报告了一个关于 preserveWhitespace 功能的问题，这个功能在 Quill v1 中正常工作，但在升级到 Quill v2 后失效了。

问题背景

preserveWhitespace 是一个用于保留文本中连续空格的功能。在 Quill v1 和 ngx-quill 24.0.5 版本中，通过在编辑器容器外包裹 <pre> 标签就能实现这一功能。然而，在升级到 Quill v2 和 ngx-quill 25.x 后，这一方法不再有效。

技术分析

经过深入调查，发现这个问题源于 Quill v2 内部实现的重大变化：

1. Quill v1 的实现方式：在 v1 版本中，剪贴板模块会将 HTML 插入到编辑器容器内的一个隐藏 div 中，并通过 getComputedStyles() 检查是否应该折叠空格。因此，只需在编辑器容器外包裹 <pre> 标签就能保留空格。

2. Quill v2 的变更：在 v2 版本中，剪贴板模块改为直接解析粘贴的 HTML，而不是先插入到 DOM 中。这一架构变化导致之前通过 <pre> 标签包裹容器的方法失效。

3. CSS 解决方案尝试：开发者尝试了通过设置 white-space: pre-line 样式来解决问题，但这种方法在 Quill v2 中同样无效。

解决方案

经过与 Quill 核心开发者的讨论，确认了以下信息：

1. Quill v2 的设计意图：Quill 团队并不打算在 v2 版本中改变关于空格处理的行为。空格折叠仍然是默认行为，除非空格位于 <pre> 标签内。

2. 正确的实现方式：在 Quill v2 中，要保留空格，必须确保传递给 clipboard.convert() 的 HTML 字符串中包含 <pre> 标签，而不是仅仅在编辑器容器外包裹 <pre> 标签。

3. 替代方案：可以通过添加 TEXT_NODE 匹配器来覆盖默认行为，但这需要对 Quill 内部机制有较深的理解。

最终决策

考虑到这一功能在 Quill v2 中的实现复杂度增加，且与默认行为差异较大，ngx-quill 团队决定从 25.1.0 版本开始移除 preserveWhitespace 功能。对于确实需要此功能的用户，建议：

1. 继续使用 Quill v1 和 ngx-quill 24.x 版本
2. 自行实现自定义解决方案，如预处理输入内容或使用 TEXT_NODE 匹配器

经验总结

这个案例展示了依赖库重大版本升级可能带来的兼容性问题。作为开发者，在升级依赖时需要：

1. 充分测试现有功能的兼容性
2. 了解底层库的架构变化
3. 准备好应对方案或回退计划

对于 ngx-quill 用户来说，如果 preserveWhitespace 是关键需求，目前最稳定的方案是保持在 Quill v1 和 ngx-quill 24.x 的版本组合上。