点击加粗按钮需先通过事件委托统一捕获,再校验选区安全性:检查是否在contenteditable内、未跨不可编辑节点、非空选区且不在只读区域,并结合编辑器状态拦截受限上下文,失败时提供友好反馈。

在自研富文本编辑器中,点击加粗按钮时不能直接操作 DOM,必须先确认当前光标或选区是否处于可安全格式化的状态——比如是否落在 contenteditable 区域内、是否跨了不可编辑节点、是否为空选区或位于只读段落中。事件委托本身不用于“检查选区”,而是用来统一捕获按钮点击;真正的安全校验发生在委托触发后的处理逻辑里。
用事件委托统一监听加粗按钮点击
将加粗按钮的点击事件绑定到编辑器容器(如 #editor-toolbar),而非每个按钮单独绑定:
- 避免重复监听,便于动态增删按钮
- 利用事件冒泡,通过
event.target.dataset.cmd === "bold"判断是否为加粗指令 - 确保所有格式按钮共用同一入口,后续校验和执行逻辑可复用
点击后立即校验选区安全性
获取选区后需逐层验证,不是“有选区就能加粗”:
- 调用
window.getSelection(),若rangeCount === 0,说明无有效选区,此时应聚焦编辑区并置光标于末尾,而非报错中断 - 取
getRangeAt(0)后,检查range.startContainer是否为可编辑的文本节点或元素节点;若其父级含contenteditable="false"或data-readonly属性,跳过格式化 - 判断是否跨多个块级节点(如同时选中两个
<p>),这种情况下surroundContents会失败,应改用分段处理或降级为对各段分别应用格式
结合编辑器状态做前置拦截
仅靠 DOM 选区不够,还需联动编辑器内部状态:
- 检查当前编辑模式:是否处于代码块、表格单元格、嵌入卡片等受限上下文,这些区域通常禁用行内格式
- 确认焦点是否仍在编辑器内(
document.activeElement === editorEl),防止用户切出窗口后误点按钮 - 若使用自定义数据模型(如 JSON 描述的文档树),需同步校验光标对应节点是否允许设置
bold: true,例如标题节点可能锁定字体样式
安全失败时提供友好反馈
校验不通过时不要静默忽略,要给出明确提示或自动修正:
- 光标在空白行?自动激活该行并允许加粗输入
- 选区包含图片或 widget?提示“该内容不支持加粗”,或仅对纯文本部分生效
- 检测到只读段落?高亮显示该段并禁用按钮,而不是让点击无响应

















