不能用<toolbar>标签，因HTML标准中不存在该元素，浏览器不识别，会破坏可访问性；必须用<div role="toolbar">配合aria-label或aria-labelledby确保语义正确与辅助技术兼容。
不能用 <toolbar> 标签——浏览器根本不识别它，写了等于白写，还破坏可访问性。
为什么插件式工具栏必须用 div + role="toolbar"
HTML 标准里压根没有 <toolbar> 元素，硬写会丢失语义、被屏幕阅读器忽略、WCAG 检查直接报错。真正能拆、能插、能动态加载的工具栏，得靠结构可控的容器：
-
div是唯一能自由增删子节点、不带默认样式干扰、支持data-plugin-id等自定义属性的载体 -
role="toolbar"告诉辅助技术“这是操作区”，但必须配aria-label或aria-labelledby，否则无效 - 每个插件按钮应独立封装为
div或button，带data-plugin="markdown-bold"这类标识，方便 JS 动态启用/禁用 - 禁止把整个工具栏塞进一个
contenteditable区域里——那不是工具栏，是编辑器内容的一部分
怎么让插件真正“可拆卸”：DOM 操作 + 生命周期钩子
所谓“可拆卸”，不是视觉隐藏，而是 DOM 层级上的移除与重挂。关键在三件事：清空状态、解绑事件、保留配置。
- 卸载插件时，调用
pluginElement.remove()，别只设display: none—— 后者仍占内存、监听器还在跑 - 每个插件初始化时，把事件监听器存到自身属性上，比如
btn._clickHandler = () => {...}，卸载前用btn.removeEventListener('click', btn._clickHandler) - 插件配置（如快捷键、默认图标）应存在独立对象里，而非内联在 HTML 中，否则
innerHTML = ''一清全丢 - 如果插件依赖外部资源（比如图标字体或 SVG sprite），卸载时不删
<link>或<symbol>，避免其他插件崩溃
插件加载顺序和依赖冲突怎么处理
多个插件共存时，光标焦点、选区判断、命令执行顺序极易打架。常见现象是点 A 插件按钮后 B 插件状态错乱。
立即学习“前端免费学习笔记（深入）”；
- 所有插件共享同一个编辑容器引用，但各自维护自己的状态缓存，比如
isBoldActive应由工具栏统一 query，而不是各插件自己调document.queryCommandState('bold') - 用
CustomEvent做通信：插件 A 执行加粗后，派发new CustomEvent('format-applied', { detail: { type: 'bold' } })，B 插件监听并同步 UI - 避免插件直接操作
document.execCommand—— 改用统一入口函数applyFormat(type, value)，内部按浏览器能力自动降级 - Markdown 插件和富文本插件绝不能混装在同一
contenteditable区域：前者输出**text**，后者插入<strong>，DOM 一混合就崩
真正难的不是加插件，而是卸载后不留痕迹——没清掉的事件监听器、残留的 tabindex、未释放的 Selection 引用，都会在下次加载时引发光标消失或命令静默失败。动手前先想清楚：这个插件删了，编辑器还能不能安全回到初始状态。
