富文本批量删格式应基于选区用Range精确处理：先获取selection和range，克隆内容后递归清除style/class但保留p/div/br/pre等结构标签，再替换原内容；禁用已废弃的execCommand('removeFormat')；整块清除推荐DOMParser解析+白名单过滤；服务端净化更可靠，且需手动重置光标位置。
富文本编辑器里批量删格式，不是清空内容，而是剥离所有样式、标签、嵌套结构，只留纯文本语义。核心难点不在“删”，而在“不破坏换行、段落和用户意图”——直接 innerHTML = textContent 会吞掉所有回车，document.execCommand('removeFormat') 在现代浏览器中已失效且行为不一致。
用 getSelection() + Range 精确清除选区样式
浏览器原生的格式清除必须基于当前选区操作，不能靠遍历 DOM 节点硬删 style 属性或标签。否则会误删语义性标签（如 <h2></h2>、<ul></ul>），或漏掉 inline 样式包裹的深层节点。
- 先调用
window.getSelection()获取真实用户选中范围，避免依赖编辑器内部状态 - 用
selection.getRangeAt(0)拿到Range对象，再range.cloneContents()复制节点树，避免污染原始 DOM - 对克隆后的每个节点递归处理：
node.removeAttribute('style')、node.removeAttribute('class')，但保留<p></p>、<div>、<code><br>这类结构标签 - 最后
range.deleteContents()清空原位置，再range.insertNode(frag)插入净化后的内容片段 - 不要在新项目中使用
document.execCommand('removeFormat') - 若需兼容旧系统，必须加 UA 判断 + fallback：检测失败后降级为手动 Range 处理
- 注意它只能作用于当前焦点编辑器，多编辑器实例下容易清错目标
- 推荐做法：用
DOMParser解析el.innerHTML，遍历所有文本节点，用document.createTextNode(node.textContent)替换，同时保留<p></p>、<div>、<code><br>、<pre class="brush:php;toolbar:false;"></pre>四类容器节点 - 特别注意
<pre class="brush:php;toolbar:false;"></pre>：它的换行和空格有语义，不能简单转成普通<p></p> - 避免正则替换 HTML 字符串（如
innerHTML.replace(/]*>/g, '')），它会破坏实体编码（如 - 前端发请求时带上
{ action: 'strip-format', html: el.innerHTML } - 后端用成熟库（如 Python 的
bleach或 Node 的sanitize-html）配置白名单：tags: ['p', 'br', 'div']，attributes: {}，strip: true - 返回净化后 HTML，前端用
el.innerHTML = response.html替换，比 JS 前端解析更稳定
execCommand('removeFormat') 为什么不可靠
这个 API 已被 Chrome/Firefox/Edge 标记为废弃，实际行为差异极大：Firefox 可能只清内联样式，Chrome 会把 <strong></strong> 换成 <span></span> 再删 style，Safari 则可能直接跳过 <em></em>。更严重的是，它无法控制是否保留段落结构，常把多个 <p></p> 合并成一行。
批量清除整块内容（非选区）时用 innerHTML 替换要带结构意识
如果目标是清空整个富文本容器（比如一个 contenteditable="true" 的 <div id="editor">），直接 <code>el.textContent = el.textContent 会抹掉所有换行；而 el.innerHTML = el.innerText 在某些版本 Safari 中会丢掉空段落。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
服务端配合能规避大部分前端陷阱
真正健壮的“清除格式”应该由后端完成解析与净化，前端只负责传原始 HTML 和指令。这样能统一处理 XSS 过滤、非法标签剔除、语义降级（如把 <h2></h2> 转成带 class 的 <p></p>）等逻辑。
最易被忽略的一点：清除格式后，光标位置不会自动重置。用户删完一段加粗文字，光标可能卡在上一个 <span></span> 闭合处，导致下次输入仍带残留样式。必须在插入净化内容后，手动用 range.collapse(false) 把光标放到末尾，并 selection.removeAllRanges() 再 selection.addRange(range) 恢复焦点。
