修改Quill.js的Delta数据是否会同步更新对应DOM元素？

在Quill.js编辑器中插入图片时，默认会将图片转换为base64格式存储，该格式数据体积较大，不利于在不同页面间传递。

开发对应逻辑，当编辑器内插入图片时，通过Laravel后端完成图片存储处理后返回图片访问URL，用于替换DOM中img标签的src属性，目前后端图片下载存储、URL返回的代码逻辑已开发完成。

如果直接编辑Quill.js的Delta数据，是否会同步修改DOM中对应的img标签src属性？目前暂未编写前端对应实现代码，仅提前确认Delta的修改是否会同步反映到DOM上，若需要补充更多相关信息可随时告知。

只要通过Quill官方提供的API修改Delta数据，修改结果会自动同步到对应DOM上，直接篡改Delta内部属性的方式不会触发视图更新。
具体注意事项和实现参考如下：

• 不要直接修改quill.getContents()返回的Delta对象，这个值是Quill内部状态的一次性快照，直接修改对象属性不会被Quill的状态监听捕获，不会触发DOM更新。
• 替换已插入的base64图片时，先定位到目标图片在Delta中的索引位置，调用quill.updateContents()方法传入修改规则，将对应image类型节点的src值替换为后端返回的线上URL即可，Quill会自动完成DOM重渲染，img标签的src属性会同步更新。
• 更推荐的实现路径是重写编辑器的图片插入逻辑：用户选择图片后先调用Laravel后端上传接口，拿到图片访问URL后直接调用quill.insertEmbed()在光标位置插入src为线上地址的图片，从根源上避免插入base64再二次替换的步骤，稳定性更高。

参考替换逻辑代码片段：

// 定位到目标base64图片的索引位置后执行替换
const replaceImageDelta = new Delta()
  .retain(targetImageIndex) // 光标移动到目标图片前
  .delete(1) // 删除原base64图片节点
  .insert({ image: remoteImageUrl }) // 插入线上地址图片
quill.updateContents(replaceImageDelta, 'user')

提示：如果是用户刚插入的base64图片，可以在插入动作触发时就记录该节点的索引位置，不需要后续遍历全量Delta查找，能减少性能消耗。

内容的提问来源于stack exchange，提问作者Mandeep Singh