本文详解如何在 Quill 富文本编辑器中通过操作 Delta 格式，在不破坏光标位置与选区的前提下，自动将文本片段（如
本文详解如何在 quill 富文本编辑器中通过操作 delta 格式，在不破坏光标位置与选区的前提下，自动将文本片段（如 `
Quill 的核心数据模型是 Delta——一种轻量、可序列化、支持协同编辑的 JSON-like 操作描述格式。它不依赖 HTML 字符串，而是以原子操作（insert、delete、retain）表达内容变更，因此对文本的解析与修改必须基于 Delta 层，而非直接操作 innerHTML。
要实现“输入即替换”（如 → <code>❤️，或 https://example.com → 可点击链接），关键在于：
✅ 在用户输入后捕获变更；
✅ 安全解析当前 Delta，定位纯文本操作项；
✅ 执行字符串替换（注意保留格式属性）；
✅ 同步更新内容并精准恢复光标/选区位置；
❌ 避免在 text-change 回调中直接调用 setContents——因其触发于 DOM 更新之后，若立即修改会导致光标跳变或粘滞。
以下是一个生产就绪的实现方案：
const quill = new Quill('#editor', {
theme: 'snow',
readOnly: false,
// 禁用 toolbar 实现纯文本+自动增强体验
modules: { toolbar: false }
});
// 定义替换规则：正则 + 替换函数（支持 emoji 和链接）
const REPLACEMENTS = [
{ regex: /<3/g, replacement: '❤️' },
{ regex: /<3/g, replacement: '?' }, // 可扩展
{
regex: /https?:\/\/[^\s]+/g,
replacement: (url) => `<a href="${url}" target="_blank" rel="noopener">${url}</a>`
}
];
quill.on('text-change', handleTextChange);
// 初始化时也处理已有内容
handleTextChange();
function handleTextChange(delta, oldDelta, source) {
if (source === 'silent') return;
const currentDelta = quill.getContents();
const updatedOps = [];
currentDelta.ops.forEach(op => {
if (typeof op.insert === 'string') {
let transformed = op.insert;
// 顺序应用所有替换规则（注意：正则需全局且无冲突）
REPLACEMENTS.forEach(({ regex, replacement }) => {
if (typeof replacement === 'function') {
transformed = transformed.replace(regex, replacement);
} else {
transformed = transformed.replace(regex, replacement);
}
});
updatedOps.push({ ...op, insert: transformed });
} else {
// 保留格式操作（如 bold、color、image 等）原样透传
updatedOps.push(op);
}
});
// 使用 queueMicrotask 延迟执行，确保 DOM 渲染完成、selection 已同步
queueMicrotask(() => {
const selection = quill.getSelection(true); // true → 强制获取当前焦点状态下的选区
quill.setContents({ ops: updatedOps }, 'silent');
// 仅当编辑器处于聚焦状态时才恢复光标，避免后台修改干扰用户
if (selection && document.activeElement === quill.root) {
quill.setSelection(selection.index, selection.length, 'silent');
}
});
}⚠️ 重要注意事项：
-
不要在
text-change中直接setContents：这会引发无限循环（setContents触发新text-change）或光标丢失。queueMicrotask是目前最可靠的方式，它确保操作在当前任务队列末尾执行，DOM 与 selection 已就绪。 -
链接替换需谨慎：Quill 原生不支持内联 HTML 插入（
<a></a>标签会被过滤）。如需真实链接交互，推荐使用 custom blot 或改用link格式（{ insert: 'quilljs.com', attributes: { link: 'https://quilljs.com' } }），后者由 Quill 原生渲染为安全<a></a>元素。 -
性能考虑：对长文档频繁全量 Delta 遍历可能影响响应速度。如需高频率替换（如实时 Markdown 预览），建议结合
delta.diff()计算增量变更，仅处理新增文本段。 -
兼容性：
queueMicrotask在现代浏览器中广泛支持；若需兼容 IE，可用Promise.resolve().then(...)替代。
总结：Quill 的 Delta 模型赋予了开发者强大而可控的内容操作能力。通过监听 text-change、延迟更新、精准恢复 selection，并严格区分文本与格式操作，即可在不牺牲用户体验的前提下，实现健壮的自动内容增强逻辑——无论是表情符号映射、URL 自动化链接，还是未来扩展的 @提及、#话题等语义化处理。
