最轻量编辑方案是contenteditable="true"的，但易产生不可控html；需隔离样式或兼容旧浏览器时必须用+designmode；根节点禁用或，统一用并避免white-space:pre；需设src="about:blank"、onload后注入内容并启用designmode；工具栏命令须绑定对应上下文document；粘贴污染需在paste事件中清洗。
直接用 contenteditable="true" 的 <div> 是最轻量、最快上手的编辑区域方案，但容易在粘贴、回车、嵌套结构等场景下产生不可控的 HTML；若需隔离样式、避免污染主文档或兼容老浏览器，必须用 <code><iframe></iframe> + designMode。
contenteditable 编辑区为什么不能直接放 <p></p> 或 <span></span> 作为根节点
浏览器对 contenteditable 元素的默认行为会自动包裹纯文本、合并相邻块级元素、甚至插入空 <div> 或 <code><br>。如果手动设根为 <p></p>，用户按回车时可能生成新的 <p></p>（符合语义），也可能生成 <div>（Chrome 常见），导致结构混乱。
<ul><li>始终用 <code><div> 作根容器，它不会被浏览器强制换行或拆分
<li>禁止在根元素上设置 <code>white-space: pre 或 pre-wrap，否则会干扰换行逻辑
<div><br></div> 而非空字符串，避免 Safari 下首次聚焦无光标iframe + designMode 编辑环境的 DOM 结构要点
<iframe></iframe> 模式本质是创建一个独立 document 上下文，所有格式操作、事件监听、HTML 输出都限定在 iframe 内部，不与父页面样式/脚本冲突。但它要求显式注入初始 HTML，并等待 load 后才能启用 designMode。
-
src必须设为"about:blank"或指向一个空白 HTML 文件，不能留空或为""（IE/Edge 会报错） - 注入初始内容要用
iframe.contentDocument.write()，且必须在iframe.onload之后执行 - 启用编辑前要确保
iframe.contentDocument.body已存在，否则designMode = "on"无效 - 后续所有
execCommand都要调用iframe.contentDocument.execCommand()，而非顶层 document
工具栏按钮如何绑定到正确编辑上下文
工具栏本身是父页面的 DOM，但命令目标可能是 contenteditable 区域，也可能是 iframe 内部 document。一旦混用，execCommand 就会静默失败——没有报错，但格式不生效。
- 若编辑区是
<div contenteditable="true">，按钮 <code>onclick直接调用document.execCommand("bold", false, null) - 若编辑区是
<iframe></iframe>，按钮必须先获取目标 document：const doc = iframe.contentDocument; doc.execCommand("bold", false, null) - 不要依赖
document.queryCommandState()判断按钮激活态，它在 iframe 中不可靠；改用检查选区doc.getSelection().getRangeAt(0).commonAncestorContainer的父节点样式
真正难处理的不是初始结构，而是用户粘贴 Word、微信、钉钉等来源内容后产生的冗余 style、class、span 嵌套和不可见字符。这部分无法靠 DOM 结构设计规避，得在 input 或 paste 事件里做清洗。
