TipTap 链接点击无法跳转？一个清晰的解决方案指南

vue.js

2024-03-06 16:56:58

TipTap 链接扩展的错误 URL 问题：深入解析与解决方案

概述

在 Vue.js 中使用 TipTap 库构建富文本编辑器时，用户可能会遇到链接点击后无法正常跳转的问题。本文深入探究了导致此问题的根源，并提供了详细的解决方案步骤。

问题根源

此问题的核心在于 TipTap 默认配置中的链接 href 属性设置为相对 URL。在开发环境中，这意味着 href 属性相对于 localhost 服务器的根路径，导致 URL 错误。

解决方案

要解决此问题，需要在 TipTap 编辑器的配置中明确指定链接的协议和主机名。

1. 配置编辑器

import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Link from '@tiptap/extension-link'
import Underline from '@tiptap/extension-underline'

const editor = new Editor({
  extensions: [
    StarterKit,
    Link.configure({
      defaultOptions: {
        target: '_blank',
        rel: 'noopener noreferrer',
        openOnClick: true,
      },
    }),
    Underline
  ],
  content: ``,
})

2. 设置链接

const setLink = (url) => {
  if (url.indexOf('http') === -1) {
    url = 'http://' + url
  }

  editor
    .chain()
    .focus()
    .extendMarkRange('link')
    .setLink({ href: url })
    .run()
}