如何在Tiptap编辑器中获取链接元素的文本内容？

获取光标所在链接的文本内容 #

当光标位于链接中间时，你可以通过Tiptap的状态API定位链接节点，再提取其文本：

1. 定位链接节点：
   利用光标位置的上下文，向上查找链接类型的节点：

   const { $from } = editor.state.selection;
   // 判断光标所在父节点是否为链接，否则向上一级查找
   const linkNode = $from.parent.type.name === 'link' 
     ? $from.parent 
     : $from.node($from.depth - 1);
   

2. 提取文本内容：
   直接通过节点的textContent属性获取链接内的文本：

   const linkText = linkNode.textContent;
   // 示例中会得到"cursor is here"
   

实现支持编辑文本与href的链接UI #

要做类似谷歌文档或WordPress的链接编辑界面，可按以下步骤实现：

• 弹窗初始化：检测到光标在链接内时，弹出编辑弹窗，将linkText填充到文本输入框，editor.getAttributes('link').href填充到URL输入框。
• 更新链接文本：用户修改文本后，先选中整个链接节点，再替换内容：

  // 获取链接节点的范围并选中
  const linkRange = $from.blockRange(linkNode);
  editor.commands.setTextSelection(linkRange);
  // 插入新的链接内容
  editor.commands.insertContent({
    type: 'link',
    attrs: { href: updatedHref },
    content: [{ type: 'text', text: updatedText }]
  });
  

• 更新链接地址：用户修改href时，直接更新链接属性：

  editor.commands.updateAttributes('link', { href: updatedHref });
  

注意：操作前要加判断，确保当前选中的确实是链接节点，避免出现非预期报错。

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