本文介绍如何在 Quill 编辑器中使用 Mention 模块时，准确捕获用户点击下拉建议项的事件，并提取对应用户的 ID，解决原生 mention-clicked 事件仅在插入后触发、无法及时响应选择行为的问题。
本文介绍如何在 quill 编辑器中使用 mention 模块时，准确捕获用户点击下拉建议项的事件，并提取对应用户的 id，解决原生 `mention-clicked` 事件仅在插入后触发、无法及时响应选择行为的问题。
Quill 的 @mention 功能默认通过 mention-clicked 自定义事件通知“提及已插入完成”，但该事件在用户点击建议项后、内容已写入编辑器时才触发，无法满足“点击即响应（如预加载用户资料、高亮选项、统计点击行为）”等交互需求。而直接监听 DOM（如 #quill-mention-list）失败的根本原因在于：该元素由 Quill Mention 动态创建与销毁，且不挂载在 #editor 内部，而是作为 body 的子节点存在，同时其 ID 并非固定为 quill-mention-list（实际 class 为 ql-mention-list），导致早期绑定无效。
✅ 正确方案是利用 Quill 的 text-change 生命周期钩子，在用户主动操作（source === 'user'）时解析当前 HTML，精准提取最新插入项的 data-id：
quill.on('text-change', function(delta, oldDelta, source) {
if (source !== 'user') return;
// 获取编辑器渲染后的完整 HTML
const html = quill.root.innerHTML;
// 匹配所有 data-id 属性（Mention 插入时自动添加）
const idMatches = html.match(/data-id="(\d+)"/g);
if (!idMatches || idMatches.length === 0) return;
// 取最后一个匹配项（即本次刚插入的 mention）
const lastMatch = idMatches[idMatches.length - 1];
const userId = lastMatch.match(/data-id="(\d+)"/)[1];
console.log('Selected user ID:', userId);
document.getElementById('user_id_field').value = userId;
});
⚠️ 注意事项：
- data-id 是 Quill Mention 在渲染 时自动注入的属性（如 @Patrik Sjölin），无需手动配置；
- 必须校验 source === 'user'，避免响应程序化内容变更（如 quill.setContents()）；
- 使用 html.match() 而非 DOM 查询，因 ql-mention-list 元素在点击瞬间已被移除，无法可靠获取；
- 若需区分多次提及，可结合 delta.ops 分析新增文本片段，但对单次选择场景，取最后 data-id 最简洁可靠。
此方法稳定兼容 Quill v1.x + @quilljs/mention，无需修改源码或依赖未公开 API，是生产环境推荐的轻量级解决方案。
