浏览器扩展开发：blur() + focus() 的妙用 - 富文本编辑器状态刷新技巧

最近在做小红书自动化发布功能的时候，发现一个挺有意思的代码片段：

editorEl.blur();
editorEl.focus();

看起来就是让编辑器先失去焦点再重新获取焦点，这么简单的两行代码到底有啥用呢？今天就来聊聊这个看似简单却很有用的技巧。

这代码到底在干嘛

简单说，这两行代码是在强制刷新编辑器的内部状态。

就像我们平时用编辑器的时候，有时候需要点一下别的地方再点回来，编辑器才会反应过来内容已经变了。这个代码就是在模拟这个操作。

为什么需要这么干

1. 让编辑器知道内容变了

小红书用的 TipTap 编辑器底层是 ProseMirror，这个库有点”迟钝”——当你用代码直接修改内容时，它可能察觉不到变化。

// 直接设置内容，编辑器可能没反应
editor.innerHTML = "新内容"
 
// 失去焦点再获取焦点，编辑器就醒了
editor.blur()
editor.focus()

2. 解决浏览器兼容性问题

不同浏览器对程序化修改内容的反应不一样，有的灵敏有的迟钝。用这个技巧可以确保在所有浏览器里行为一致，避免出现”在这个浏览器能用，在那个浏览器就不行”的情况。

3. 激活编辑器功能

编辑器有些功能需要焦点事件来触发，比如：

• 工具栏按钮状态更新
• 内容变化检测
• 自动保存功能

没有焦点事件，这些功能可能就罢工了。

在实际项目里怎么用

在小红书的自动化发布流程里，这个技巧用在这个地方：

async function fillTipTapEditor(content: string) {
  // 先填充内容
  editor.innerHTML = content
 
  // 然后强制刷新状态
  editor.blur()
  editor.focus()
 
  // 现在编辑器知道内容已经变了
}

这样做的好处是：

• 发布按钮能正确识别到有内容了
• 避免出现”内容填了但编辑器觉得还是空的”这种尴尬情况
• 确保所有编辑器功能都能正常工作

什么时候需要用这个技巧

根据我的经验，这些情况下特别有用：

• 富文本编辑器：TipTap、ProseMirror、Quill 这类复杂的编辑器
• 程序化修改内容：用代码直接设置 innerHTML 或 textContent
• 跨浏览器兼容：需要确保在所有浏览器里行为一致
• 自动化测试：模拟真实用户操作流程

最后提醒一下

这个技巧虽然简单，但在处理富文本编辑器的时候特别实用。很多看起来莫名其妙的编辑器问题，其实都是状态同步的问题。

下次遇到编辑器”反应迟钝”的情况，不妨试试先 blur() 再 focus()，说不定问题就解决了。

大家在开发过程中如果遇到类似的编辑器状态问题，欢迎一起交流讨论！