ngx-quill 中自定义视频格式触发内容变更事件的解决方案

背景介绍

在使用ngx-quill富文本编辑器时，开发者经常需要扩展其功能以满足特定需求。本文针对一个常见场景：如何在使用自定义视频格式时正确触发编辑器的内容变更事件。

问题描述

当开发者实现自定义视频格式并添加了视频尺寸调整功能时，发现虽然UI上的视频尺寸可以正常调整，但这些调整操作不会自动触发编辑器的内容变更事件。只有在调整尺寸后继续输入文本时，变更才会被捕获。

技术分析

ngx-quill默认只跟踪"用户"类型的变更（source参数为'user'）。这是为了防止外部表单控件或ngModel变更导致不必要的变更事件触发。对于通过API或静默方式进行的修改，默认不会触发变更事件。

解决方案

方案一：修改trackChanges输入属性

最简单的解决方案是在ngx-quill编辑器组件上设置trackChanges输入属性为'all'，这样编辑器会跟踪所有类型的变更，而不仅仅是用户输入。

<quill-editor [trackChanges]="'all'"></quill-editor>

方案二：在自定义模块中显式触发变更

更精确的控制方式是在自定义视频格式的实现中，当视频尺寸被调整时，显式地调用Quill的update方法并指定source为'user'。

在视频调整逻辑完成后（如mouseUp事件处理中），可以这样触发变更：

this.node.parent.update('user');

实现建议

1. 深入理解Quill的变更跟踪机制：Quill的update API接受source参数，可以是'user'、'api'或'silent'，了解这些区别有助于正确实现功能。

2. 参考内置格式的实现：研究Quill内置格式（如图片、链接等）如何处理类似场景，可以获取最佳实践。

3. 性能考虑：如果选择方案一（trackChanges='all'），需要注意可能会增加不必要的变更事件触发，评估对应用性能的影响。

总结

在ngx-quill中实现自定义视频格式时，正确触发内容变更事件需要理解Quill的变更跟踪机制。开发者可以根据具体需求选择全局跟踪所有变更，或在自定义模块中精确控制变更事件的触发时机。后者通常更推荐，因为它提供了更精细的控制和更好的性能表现。