17370845950

在 tiptap 中，`state.doc.textbetween()` 仅返回纯文本，无法保留自定义节点（如 ``）的 html 结构；需结合原生 `window.getselection()` 获取真实 dom 选区并序列化为 html。

Tiptap 基于 ProseMirror 构建，其核心设计原则是将编辑器文档模型（Node/Mark 树）与浏览器 DOM 严格分离——这意味着 editor.state.doc 中存储的是结构化的 JSON 表示，而非 HTML 字符串；textBetween() 等方法仅面向逻辑文本内容，天然剥离所有节点语义和标记。

因此，若需获取用户当前光标选区的带格式、含自定义标签的 HTML 字符串（例如 100），必须绕过 ProseMirror 的文档抽象层，直接操作渲染后的 DOM：

✅ 正确做法：使用 window.getSelection() 提取选区 HTML

const getSelectedHTML = () => {
  const selection = window.getSelection();
  if (!selection || selection.rangeCount === 0) return '';

  const range = selection.getRangeAt(0);
  const fragment = range.cloneContents(); // 克隆选区 DOM 片段（保留所有节点、属性、自定义标签）

  // 创建临时容器序列化为 HTML
  const div = document.createElement('div');
  div.appendChild(fragment);
  return div.innerHTML;
};

// 在事件中调用（如按钮点击或快捷键）
const handleGetSelection = () => {
  const html = getSelectedHTML();
  console.log(html); // ✅ 输出: "This shop has 100 customers every day"
};

⚠️ 注意事项

• 时机很重要：确保在编辑器已渲染完成、DOM 可访问时调用（例如在 useEffect 或用户交互回调中），避免因 React 渲染延迟导致 getSelection() 返回空。
• 跨框架兼容性：该方法依赖浏览器原生 API，与 Tiptap 版本无关，适用于 v2/v3；但需注意 SSR 环境下 window 未定义，务必加运行时判断。
• 不适用于“空选区”或“折叠选区”：当光标仅定位（无实际选中内容）时，rangeCount === 0，应做兜底处理。
• 自定义节点需正确渲染：确保你的 扩展已正确定义 renderHTML 方法（Tiptap v2）或 addAttributes + parseHTML（v3），否则 DOM 中不会生成对应标签。

? 补充：若需 JSON 结构而非 HTML？

Tiptap 提供 editor.state.doc.slice() + editor.storage.html.serialize()（需启用 @tiptap/extension-html）可导出选区为 HTML；但更推荐使用 editor.state.doc.nodesBetween() 配合自定义序列化逻辑，以精准控制节点映射规则。

总之，不要试图从 ProseMirror 文档树“反向生成 HTML”——它不是为该目的设计的。拥抱 DOM，用 getSelection() + cloneContents() 是简洁、可靠且符合 Web 标准的解决方案。

立即学习“前端免费学习笔记（深入）”；