Vue中使用Tiptap富文本编辑器的方法指南

npm install @tiptap/vue-3 @tiptap/starter-kit

<template>
  <div class="editor-container">
    <editor-content :editor="editor" class="editor" />
  </div>
</template>
<script setup>
import { onBeforeUnmount, ref } from 'vue'
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
const editor = ref(null)
onMounted(() => {
  editor.value = new Editor({
    extensions: [StarterKit],
    content: '<p>欢迎使用 Tiptap 编辑器</p>',
  })
})
onBeforeUnmount(() => {
  editor.value?.destroy()
})
</script>
<style scoped>
.editor {
  border: 1px solid #ddd;
  padding: 16px;
  min-height: 300px;
  border-radius: 4px;
}
</style>

import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image'
import Table from '@tiptap/extension-table'
import TableRow from '@tiptap/extension-table-row'
import TableCell from '@tiptap/extension-table-cell'
import TableHeader from '@tiptap/extension-table-header'
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import { lowlight } from 'lowlight/lib/common'
const editor = new Editor({
  extensions: [
    StarterKit,
    Link.configure({
      openOnClick: false, // 禁用点击跳转
      validate: href => /^https?:\/\//.test(href), // 验证URL格式
    }),
    Image.configure({
      allowBase64: true, // 允许base64图片
      HTMLAttributes: {
        class: 'editor-image',
      },
    }),
    Table.configure({
      resizable: true,
    }),
    TableRow,
    TableCell,
    TableHeader,
    CodeBlockLowlight.configure({
      lowlight,
    }),
  ],
  content: '<p>开始编辑...</p>',
})

import { uploadImage } from '@/api/upload' // 假设存在上传接口
const editor = new Editor({
  extensions: [
    Image.configure({
      inline: true, // 行内图片
      async onUpload({ file }) {
        const formData = new FormData()
        formData.append('file', file)
        const { data } = await uploadImage(formData)
        return data.url // 返回图片URL
      },
    }),
  ],
})

<template>
  <div>
    <editor-content :editor="editor" />
    <div class="word-count">当前字数：{{ characterCount }}</div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import CharacterCount from '@tiptap/extension-character-count'
const editor = new Editor({
  extensions: [
    StarterKit,
    CharacterCount.configure({
      limit: 1000, // 限制1000字
    }),
  ],
})
const characterCount = computed(() => editor.storage.characterCount.characters())
</script>

<template>
  <div class="toolbar">
    <button @click="editor.chain().focus().toggleBold().run()" :disabled="!editor.can().chain().focus().toggleBold().run()">
      <strong>B</strong>
    </button>
    <button @click="editor.chain().focus().toggleItalic().run()" :disabled="!editor.can().chain().focus().toggleItalic().run()">
      <em>I</em>
    </button>
    <!-- 更多按钮... -->
  </div>
  <editor-content :editor="editor" />
</template>