富文本编辑器中不能直接用<div>嵌套<p>，因为浏览器contenteditable解析时会强制规范化结构，将非法嵌套拆解为扁平化DOM（如两个并列<p>），导致样式丢失、光标跳变、JS操作失败及CSS选择器失效。
富文本编辑器里为什么不能直接用 <div> 嵌套 <p>？
因为绝大多数富文本编辑器（如 TinyMCE、Quill、Slate）底层依赖 contenteditable，而浏览器对可编辑区域的 HTML 解析有严格限制：当编辑器初始化时，它会尝试“规范化”输入结构，把非法嵌套（比如 <div><p></p></div>）自动拆解或替换为扁平结构（如两个并列 <p>），导致样式丢失、光标跳变或粘贴异常。
- 常见错误现象：
getHTML()返回的结构和你预期不一致，CSS 类名莫名消失，块级元素被强制转成<div> - 真正可用的合法根容器只有
<div>或<body>，且子节点必须是“可编辑块级元素”，比如<p>、<h1>、<ul>、<pre>，不能是<span>或<div>包裹块级元素 - 如果你强行注入嵌套
<div>，编辑器在 focus/blur 时大概率会重写 DOM，甚至触发DOMException: Failed to execute 'insertNode' on 'DocumentFragment'
如何让编辑器输出语义清晰的 HTML 结构？
关键不是“怎么写 HTML”，而是“怎么约束编辑行为”。编辑器本身不负责生成完美 HTML，它只保证输出符合其 schema 的结构。你需要通过配置 schema 或插件来控制输出形态。
- Quill 使用
Parchment模型，自定义Block类时，必须重写domNode的生成逻辑，例如让标题块始终输出<h2 class="section-title">而非默认<h2> - TinyMCE 的
valid_children和extended_valid_elements配置能放宽标签嵌套限制，但仅限于输出阶段 —— 编辑时仍受contenteditable约束，不能绕过浏览器原生解析 - Slate 用 JSON 表示文档结构，导出 HTML 时才做映射，这时你可以完全控制：比如把
{ type: 'callout', children: [...] }映射为<aside class="callout">...</aside>，但要注意<aside>必须被浏览器允许作为contenteditable的直接子元素（它确实是）
document.execCommand() 已废弃，那该用什么操作 DOM 结构？
别再依赖它。现代编辑器基本都弃用 execCommand，改用 Selection API + 手动 DOM 操作，或基于虚拟 DOM 的声明式更新。
- 直接操作前，先用
window.getSelection()获取当前 range，再用range.cloneContents()判断上下文是否允许插入块级结构（比如光标是否在<p>内） - 插入新块时，优先用
insertAdjacentElement('afterend', newEl)而非appendChild()，避免破坏原有段落边界 - 如果编辑器暴露了
editor.insertNode()（如 Slate 的insertNodes()），务必传入符合其 schema 的节点对象，而不是原始 HTML 字符串 —— 否则会触发 schema 校验失败，静默丢弃
从编辑器取 HTML 后，为什么 CSS 不生效？
不是样式写错了，而是编辑器输出的 HTML 缺少必要的上下文环境。它通常只返回片段（fragment），不含 <html>、<head>、<style>，甚至连 <body> 都没有。
立即学习“前端免费学习笔记（深入）”；
- 典型表现：本地预览正常，嵌入到 Vue/React 组件后样式全丢，或者在 iframe 中加载时字体、行高错乱
- 解决方案不是加全局 CSS，而是确保目标容器有对应 class 或 scope：比如编辑器输出
<p class="rich-text__paragraph">，你就得在宿主页面引入匹配的 CSS 规则，或用scoped样式覆盖 - 更稳妥的做法是用
DOMParser将 HTML 字符串转成 Document，再用importNode插入，并手动补全<style>标签（注意避免重复注入）
真正麻烦的从来不是结构怎么写，而是编辑器、浏览器、CSS 作用域、框架渲染这四层之间谁在什么时候改写了什么 —— 多数问题出在没意识到编辑器输出的 HTML 只是一份“草稿”，不是最终交付物。
