如何在Tiptap/React中获取光标选中区域的HTML或JSON内容？

textBetween方法本身就是用来提取纯文本的，拿不到自定义标签是正常的，要保留节点结构和自定义标签，试试下面两种方法：

获取选中区域的HTML #

通过ProseMirror的Slice提取选中范围内的节点片段，再将片段序列化成HTML：

const { from, to } = editor.state.selection;
// 提取选中区域的节点片段
const slice = editor.state.doc.slice(from, to);
// 将片段转为临时文档
const tempDoc = editor.state.schema.node('doc', null, slice.content);
// 序列化HTML，会保留自定义标签
const selectedHtml = editor.storage.htmlSerializer.serialize(tempDoc);

注意：你的say-as自定义扩展要配置好HTML序列化规则，比如在扩展里添加：

export default SayAsExtension = Extension.create({
  // ... 其他基础配置
  addHTMLSerializer() {
    return {
      sayAs: (node) => {
        return `<say-as interpret-as="${node.attrs.interpretAs}">${node.textContent}</say-as>`;
      },
    };
  },
});

获取选中区域的JSON结构 #

如果需要包含自定义节点属性和结构的JSON数据，直接将提取的片段转为JSON即可：

const { from, to } = editor.state.selection;
const slice = editor.state.doc.slice(from, to);
const selectedJson = slice.content.toJSON();

返回的JSON会完整保留say-as节点的信息，示例结构如下：

{
  "type": "paragraph",
  "content": [
    { "type": "text", "text": "This shop has " },
    {
      "type": "sayAs",
      "attrs": { "interpretAs": "cardinal" },
      "content": [{ "type": "text", "text": "100" }]
    },
    { "type": "text", "text": " customers every day" }
  ]
}

内容的提问来源于stack exchange，提问作者Kody