vue提示链接检测错误的URL

Question

我已经在Vue中开发了简单的富文本输入，并使用tip tap lib。然而，我遇到了一个问题。一旦我点击了linked，word id不会将我重定向到一个新页面，而是重定向到一个带有我输入的localhost andress和URL的页面。这是它看起来的样子。该页面有reddit.comURL，但当我单击它时，它会打开为“reddit.com :8000/reddit.com”

这是我使用Netlify ->部署的页面

https://romantic-ardinghelli-dad8e5.netlify.app/

​

​

​

​

是什么触发了这样的行为？这是我使用setLink按钮的代码。

<template>
  <div>
    <div v-if="editor">
     <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
      <i class="ri-link"></i>
    </button>
    </div>
    <editor-content :editor="editor" />
  </div>
</template>

并遵循App.vue

<script>
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'
export default {
  components: {
    EditorContent,
  },

  data() {
    return {
      editor: null,
    }
  },

  mounted() {
    this.editor = new Editor({
      extensions: [
        StarterKit,
        Link,
        Underline
      ],
      content: `
       text here...
      `,
    })
  },

   methods: {
    setLink() {
      const url = window.prompt('URL')

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

  beforeUnmount() {
    this.editor.destroy()
  },
}
</script>

我在这里遵循的方法是:复制粘贴均匀。https://www.tiptap.dev/api/marks/link/#link

Answer 1

我试过了，它产生了这样的代码：

<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.tiptap.dev/api/marks/link/">test</a>

它似乎起作用了