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

Question

我是 VueJS 的新手，对我的团队正在使用的 Tiptap 编辑器更甚。我需要创建一个函数，在编辑器中的光标位置插入一个链接。

我知道带有浮动菜单气泡的 Link() 函数。那已经在起作用了。但是在 Web 应用程序中，他们希望有一个弹出窗口，其中包含一个选项来填充显示文本和相应的链接，这些链接应该插入到编辑器的光标位置。

目前，我已经有了这个代码：

insertLink(value) {
  let linkToAdd = '<a href="' + value.insertLinkUrl + '" target="_blank">' + value.insertLinkText + '</a>';
  let editorHtml = this.editor.getHTML();
  editorHtml += linkToAdd;
  this.editor.setContent(editorHtml);
}

但是，现在它附加到内容的末尾并创建一个新的段落标记，在其中存储新生成的 HTML(?)。

任何人都可以帮我指出正确的方向吗？那肯定很不错。

提前致谢！

Answer 1

我知道现在回答有点晚了，我不知道它是否会对 vuejs 中的任何人有帮助。这就是我在反应中实现的方式。

import Link from "@tiptap/extension-link";

export const CustomLink = Link.extend({
  addCommands() {
    return {
      ...this.parent?.(),
      addLink: function (options) {
        return ({ tr, commands }) => {
          commands.insertContent(
            `<a href='${options.href}' class="custom-link">${options.href}</a>`,
            {
              parseOptions: {
                preserveWhitespace: false,
              },
            }
          );
        };
      },
    };
  },
});