contenteditable 编辑区按 Tab 插入制表符 键盘出不去怎么办

富文本编辑器是一个可编辑 div，按 Tab 不会跳到下一个控件，而是在正文里插入一个制表符，键盘用户进来之后就被困住了。第一次遇到会往复杂处想，其实漏掉的多是个小前提。

editor.addEventListener('keydown', e => {
  if (e.key === 'Tab' && !e.shiftKey) { e.preventDefault(); next.focus() }
  if (e.key === 'Escape') toolbar.querySelector('button').focus()
})

可编辑区域默认把 Tab 当输入字符处理，这是浏览器行为。编辑器没有接住这个按键，也没有提供退出入口，焦点序列在这里断掉。这一点先确认清楚，后面就不用反复试。

碰到「富文本焦点逃逸」这类问题，我习惯先把当前配置原样备份一份，改坏了立刻换回来，不用现场推。新版本先放一台机器上跑一天再全量，问题一般在这段时间暴露。

具体做法是，在编辑区监听 keydown，单独处理 Tab 键，普通状态跳走，配合修饰键才缩进；在工具栏放一个退出编辑按钮，给键盘用户留一条明确的路；Esc 也绑定一次离开编辑区，回到工具栏的第一个按钮。

改完照着核一遍，进入编辑区后按 Tab 直接落到下一个控件，正文里不再出现制表符。