如何在TipTap Vue组件中调用toggleWrap清除节点包裹

我明白你想要的效果：移除当前链接节点的包裹结构，但完全保留里面的文本内容——这本质上就是把带格式的容器节点替换成它的原始子内容。下面是直接可用的实现方案，你只需要在你的Vue组件的methods里添加对应的clearNode方法即可：

methods: {
  // ... 你原来的其他方法
  clearNode() {
    const pos = this.getPos();
    // 计算当前节点的结束位置（起始位置 + 节点总大小）
    const endPos = pos + this.node.nodeSize;
    // 获取当前节点内部的所有子内容（这里就是你要保留的文本）
    const innerContent = this.node.content;

    // 创建事务：先删除整个链接节点，再把内部内容插回原位置
    const transaction = this.view.state.tr
      .delete(pos, endPos)
      .insert(pos, innerContent);

    // 提交事务，让编辑器更新状态
    this.view.dispatch(transaction);
    // 操作完成后隐藏菜单，提升用户体验
    this.hideMenu();
  },
  // ... 你原来的其他方法
}

为什么这个方法有效？ #

TipTap/ProseMirror的节点是树形结构，你的链接节点（应该是link扩展的节点）本质是一个包裹着文本节点的容器。我们的操作逻辑很直接：

1. 找到当前节点在文档中的位置
2. 删除整个容器节点
3. 把容器内部的原始文本内容插回原来的位置

这样就完美实现了“清除包裹、保留文本”的需求，而且不管你的节点内部是单个文本节点还是多个子节点，这个方法都能兼容处理。

另外，你模板里的按钮已经绑定了@click="clearNode"，所以添加完方法后直接就能生效啦。

内容的提问来源于stack exchange，提问作者MichałKraków