不能直接用outerhtml获取选中区域的完整html；必须通过getselection()→range→clonecontents()→临时容器.innerhtml路径实现，因outerhtml仅适用于单个元素而非任意选区。
outerHTML 能直接拿到选中区域的完整 HTML 吗？
能，但前提是选区（Selection）必须落在一个或多个**连续、可包裹的节点内**。浏览器原生的 getSelection() 返回的是文本范围，不是 DOM 节点；直接调用 outerHTML 会报 undefined 或 Cannot read property 'outerHTML' of null —— 因为选区对象本身没有 outerHTML，只有元素节点才有。
关键路径是：选区 → 锚点/焦点节点 → 上溯到最近的包裹元素（如 <div>、<code><p></p>）→ 获取其 outerHTML。但要注意：如果选中跨多个块级元素（比如从一个 <p></p> 中间拖到下一个 <h2></h2> 开头），就无法用单个元素的 outerHTML 完整覆盖。
如何安全获取选中内容的 outerHTML（含嵌套结构）
不能只依赖 selection.anchorNode.parentElement.outerHTML——它可能返回整个容器，远超实际选中范围。正确做法是用 Range 提取选区对应的 DOM 片段，再序列化为 HTML 字符串：
- 调用
selection.getRangeAt(0)获取首个选区范围（多选区场景需遍历） - 用
range.cloneContents()得到DocumentFragment，它保留所有子节点和结构 - 创建临时容器（如
document.createElement('div')），appendChild这个片段，再读取其outerHTML - 注意：
cloneContents()不包含选区外的父级标签（比如你只选了<strong>加粗</strong>，不会带上外面的<p></p>）
function getSelectedOuterHTML() {
const selection = window.getSelection();
if (!selection.rangeCount) return '';
const range = selection.getRangeAt(0);
const fragment = range.cloneContents();
const div = document.createElement('div');
div.appendChild(fragment);
return div.innerHTML; // 注意：这里用 innerHTML 更合理；outerHTML 会多一层 div 标签
}
⚠️ 别用 div.outerHTML——它导出的是 <div>...</div>，不是原始选中内容的 HTML。真正要的是 div.innerHTML，它等价于选中片段的“序列化结果”。
为什么 innerHTML 比 outerHTML 更适合导出选中内容
outerHTML 是为**单个元素**设计的：它输出该元素自身及其全部子内容。而编辑器里用户选中的往往是一段混合内容（文本节点 + 元素节点 + 可能的空格换行），根本不存在“一个根元素”来调用 outerHTML。这时候 innerHTML 在临时容器上反而更准确：
- 它忽略容器自身标签，只输出内部结构
- 自动处理自闭合标签（如
<br>、<img>）和属性转义 - 兼容性好，所有现代浏览器行为一致
- 若需保留原始空白（如
<pre class="brush:php;toolbar:false;"></pre>内缩进），需额外设置whiteSpace: 'pre'或预处理文本节点
导出时容易被忽略的边界问题
真实编辑器场景下，下面这些情况会让 getSelectedOuterHTML() 返回意外结果：
- 选中纯文本（无任何 HTML 标签）：
cloneContents()仍返回文本节点，innerHTML输出纯文本字符串，没问题 - 选中跨表格单元格（
<td> 到 <code><td>）：<code>cloneContents()会截断 DOM 结构，可能丢失<tr> 和 <code><table> 上下文 <li>选中包含 <code>contenteditable=false的子元素：该部分会被排除在cloneContents()外 - 选区末尾有换行符（用户回车后光标停在空行）：
range可能包含不可见的<br>或空文本节点，innerHTML会如实输出
复杂嵌套或富文本结构（比如带样式 span 套 inline mathML）建议不用纯 innerHTML 导出，改用 range.toString()（纯文本）或走 execCommand('copy') + 自定义 clipboardData（可控性更强）。
