VueJS中如何在Tiptap编辑器光标位置插入链接？

嘿，我太懂你这种新手踩坑的感觉了！直接拼接HTML然后覆盖整个编辑器内容确实会出现你说的问题——不仅把链接塞到了内容末尾，还破坏了原有的文档结构。毕竟Tiptap是基于ProseMirror构建的，它有一套自己的文档操作API，咱们得用原生方法来搞才对～

先说说你当前代码的问题 #

你现在的写法是把整个编辑器的HTML取出来，拼接上新的链接HTML再塞回去，这种方式完全忽略了光标位置，而且手动拼接HTML很容易出错，还会打乱Tiptap内部的文档节点结构（比如自动生成新的<p>标签）。

正确的实现方式 #

Tiptap内置了专门的link命令，能帮我们在光标位置（或选中内容上）插入/修改链接，完全不用手动拼HTML。这里分两种场景处理：

1. 用户已经选中了一段文本，要给这段文本加链接
2. 用户没有选中文本，要插入一段带链接的新文本

给你写个完整的示例代码：

insertLink(value) {
  // 先确保编辑器处于聚焦状态，不然光标位置会丢失
  this.editor.commands.focus();

  const { insertLinkText, insertLinkUrl } = value;
  const linkText = insertLinkText || insertLinkUrl; // 如果没填显示文本，用链接地址代替

  // 判断当前是否有选中内容
  if (this.editor.state.selection.empty) {
    // 没有选中内容：先插入显示文本，再给这段文本添加链接
    this.editor.commands.insertContent(linkText);
    // 选中刚插入的文本
    this.editor.commands.selectNodeBackward(linkText.length);
    this.editor.commands.link({
      href: insertLinkUrl,
      target: '_blank'
    });
  } else {
    // 已有选中内容：直接给选中的文本添加链接
    this.editor.commands.link({
      href: insertLinkUrl,
      target: '_blank'
    });
  }
}

为什么这样写更靠谱？ #

• 用Tiptap原生的commands操作，会自动尊重当前的光标/选中位置，不会把内容追加到末尾
• 不需要手动处理HTML标签和转义，Tiptap会根据内部的schema自动生成符合规范的节点结构，不会乱加<p>标签
• 同时覆盖了“选中文本加链接”和“插入新链接文本”两种常见场景，更贴合实际使用需求

如果你的弹窗是在编辑器失焦后打开的，还可以在打开弹窗前先保存当前的选区状态，比如：

// 打开弹窗前保存选区
this.savedSelection = this.editor.state.selection;

// 弹窗确认后恢复选区
this.editor.commands.setTextSelection(this.savedSelection);
// 再执行上面的链接插入逻辑

这样就能完美还原用户打开弹窗前的光标位置啦！

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