Quill富文本编辑器：表单提交时如何检测文本是否变更

作为刚上手Quill的开发者，我太懂你想对齐表单其他控件校验逻辑的需求了——毕竟text-change实时触发的机制，和普通输入框“提交时才检查变更”的风格确实不太搭。我来分享一套亲测可行的实现思路，解决你遇到的问题：

核心思路 #

先保存Quill编辑器的初始内容快照，在表单提交时，将当前内容和快照做对比，判断是否发生变更。

具体实现步骤 #

1. 保存初始内容快照 #

页面加载完成、Quill实例初始化后，立刻保存编辑器的初始内容。根据你的需求，可以选择保存富文本结构（带格式）或纯文本：

// 初始化Quill编辑器
const quill = new Quill('#editor-container', {
  theme: 'snow'
});

// 保存富文本结构（推荐，能检测格式变化，比如加粗、换行）
let initialQuillContent = quill.getContents();

// 如果只需要检测纯文本内容，用这个：
// let initialQuillText = quill.getText().trim();

2. 表单提交时对比内容 #

在表单的submit事件中，获取当前内容并和初始快照对比。Quill内置了Delta.equals()方法，能精准对比富文本结构：

// 监听表单提交事件
document.querySelector('#your-form-id').addEventListener('submit', function(e) {
  // 先阻止默认提交，完成校验后再决定是否提交
  e.preventDefault();

  // 获取当前富文本内容
  const currentContent = quill.getContents();
  // 对比初始内容和当前内容
  const isContentChanged = !currentContent.equals(initialQuillContent);

  // --- 如果是纯文本对比 ---
  // const currentText = quill.getText().trim();
  // const isContentChanged = currentText !== initialQuillText;

  if (isContentChanged) {
    console.log('Quill内容已变更，执行提交逻辑');
    // 确认变更后，手动提交表单
    this.submit();
  } else {
    console.log('Quill内容未变更，可提示用户或直接提交');
    // 若不需要提示，也可以直接提交
    // this.submit();
  }
});

3. 处理表单重置场景 #

如果表单有重置按钮，别忘了同步更新初始内容快照，否则重置后对比会出错：

document.querySelector('#reset-btn').addEventListener('click', function() {
  // 重置Quill到初始状态
  quill.setContents(initialQuillContent);
  // 如果重置是回到空白默认值，就更新快照：
  // quill.setContents([]);
  // initialQuillContent = [];
});

常见问题排查 #

如果你之前尝试事件触发但有问题，大概率是这几个原因：

• 误用了text-change实时触发，导致校验逻辑频繁执行；
• 用getText()对比时没处理空格/换行，导致误判；
• 初始内容快照保存时机不对（比如在异步加载内容前就保存了，导致初始值为空）。

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