tabindex在html编辑器中不是用于精细排序，而是修复焦点流断裂或使非原生可聚焦容器可访问；禁用正整数（如1、2），优先使用tabindex="0"（配role/aria）和tabindex="-1"（编程聚焦）。
tabindex 在 HTML 编辑器内部组件中**不是用来“精细排顺序”的工具**，而是用来修复默认焦点流断裂、或让非原生可聚焦容器（如工具栏按钮组、侧边属性面板、自定义菜单项）能被键盘用户访问的补位手段。强行用正整数会直接破坏编辑器内嵌逻辑和屏幕阅读器上下文。
为什么编辑器里不能用 tabindex="1"、tabindex="2"
编辑器 UI 通常由多个动态挂载的模块组成（比如工具栏、代码预览区、属性面板、折叠区域），DOM 是按需插入的。一旦你在某个按钮上写 tabindex="1"，它就会被浏览器优先拉到整个 Tab 流最前面——哪怕它在 DOM 里是最后一个节点。更糟的是：
- 多个
tabindex="1"元素仍按 DOM 插入顺序排列，你设了也没统一效果 - 当用户切换编辑模式（比如从“富文本”切到“源码”），新渲染的
<textarea></textarea>或<pre class="brush:php;toolbar:false;" contenteditable></pre>默认就在 Tab 流中，但会被你的正整数挤到末尾，导致焦点“跳回顶部”再“跳到底部” - 屏幕阅读器把第一个
tabindex="1"当作逻辑起点，如果它是右下角的“导出按钮”，用户一进页面就听到“导出”，完全丢失编辑器主区域上下文
tabindex="0" 应该加在哪些编辑器组件上
只对**有明确交互意图、但又不是原生可聚焦元素**的容器加 tabindex="0"，且必须配套语义与行为：
- 工具栏中的自定义按钮：比如
<div class="toolbar-btn" role="button" tabindex="0">加粗</div>—— 同时监听keydown处理Enter和Space，并提供:focus-visible样式 - 可折叠的属性面板标题：
<h3 class="panel-title" role="button" aria-expanded="false" tabindex="0">样式设置</h3>—— 展开后，焦点应立即移到首项输入框，而不是停在这行标题上 - 代码块语言选择下拉触发器（非
<select></select>）：<span role="combobox" aria-haspopup="listbox" tabindex="0">HTML</span>，不能只靠tabindex="0"，必须配role和aria-*属性 - 避免给
<button></button>、<a href></a>、<input>加tabindex="0"—— 它们天然在流中，加了反而干扰 SSR hydration 或 React 焦点管理
tabindex="-1" 是编辑器焦点控制的核心入口
编辑器中几乎所有“临时聚焦”场景都依赖 tabindex="-1"，它不是隐藏开关，而是编程聚焦的唯一可靠通道：
- 模态对话框（如“插入图片”）打开后，立刻对第一个输入框调用
input.focus()，前提是该<input>已设tabindex="-1"（否则在某些框架下focus()可能静默失败） - 点击代码块右侧的“复制”按钮后，焦点应回到代码块本身（方便继续编辑），此时需先记录
document.activeElement，再在操作完成后对代码块调用element.tabIndex = -1; element.focus() - 折叠面板展开后，若首项是
<div contenteditable>，它默认不可聚焦，必须提前设 <code>tabindex="-1"才能.focus() - 注意：iOS Safari 对
contenteditable+tabindex="-1"的支持不稳定，建议 fallback 到selection.getRangeAt(0).selectNodeContents(el)配合scrollIntoView({block: 'nearest'}) - iOS Safari 默认禁用除
<input>、<textarea></textarea>、<button></button>和contenteditable外所有元素的 Tab 导航，即使写了tabindex="0"也无效 —— 必须配合role+aria-*+keydown监听才能被识别为可交互 - SSR 渲染时，服务端不会执行 JS，所以
tabindex="-1"的元素在 HTML 中已存在，但客户端 hydrate 后若未正确保留该属性，会导致焦点状态不一致；建议在 React/Vue 中用useEffect或onMounted显式重置el.tabIndex = -1 - 使用
focus({preventScroll: true})在 Safari 中会静默失败，真实项目中应先检测：if ('preventScroll' in FocusOptions.prototype)，否则手动加el.scrollIntoView({block: 'nearest'})
移动端和 SSR 场景下容易忽略的坑
编辑器在移动设备或服务端渲染时，tabindex 表现更脆弱：
