Vue TipTap编辑器-无法添加链接

Question

我正在使用Vue3 & TypeScript构建一个TipTap Wysiwyg编辑器。在尝试使用链接扩展时出现问题(其他扩展，如StarterKit、突出显示和TaskList可以正常工作)。

下面是文档：https://tiptap.dev/api/marks/link/

我安装了正确的链接扩展yarn add @tiptap/extension-link

进口import Link from '@tiptap/extension-link'

使用默认选项向编辑器添加链接扩展如下：

setup() {
  const editor = useEditor({
    extensions: [..., Link],
    ...
  return {
    editor,
  }
}

获取以下错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'target')   tiptap-extension-link.esm.js?2dbe:148 

任何帮助都将得到极大的帮助。

Answer 1

正如您在npm包站点中看到的那样，延伸-链接目前是beta版，因此我相信包本身中目前存在缺陷或缺少参数，因此为了克服该错误，您可以通过这样配置链接来传递参数：

Link.configure({
          HTMLAttributes: { target: '_blank' },
          linkOnPaste: false,
          openOnClick: true,
        }),

通过这样做，包可能不会像我所期望的那样工作，所以您可以利用这样的事实，即现在您的编辑器理解了标记，但是自动转换为链接的逻辑可能不起作用，因此您应该编写逻辑urself并将新文本传递给编辑器，如下所示：

replaceUrls(string) {
  const urlRegex = /(?<!href=")(?<!>)(((https?:\/\/)|(www\.))[^\s|<]+)/g
  return string.replace(urlRegex, (url) => {
    let hyperLink = url
    if (!hyperLink.match('^https?://')) {
      hyperLink = 'http://' + hyperLink
    }
    return (
      '<a href="' + hyperLink + '" target="_blank" >' + url + '</a> &nbsp;'
    )
  })
}

因此，您可以使用以下命令更新编辑器内容，以便将链接转换为编辑器理解的标记

editor.commands.setContent(replaceUrls(editor.getHTML()), false)