使用教學

1. 先依據初始範例建立Editor
   這裡使用useEditor，來自動處理掛載/卸除的邏輯

<template>
  <editor-content :editor="editor" />
</template>

<script setup>
  import { useEditor, EditorContent } from '@tiptap/vue-3'
  import StarterKit from '@tiptap/starter-kit'

  const editor = useEditor({
    content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
    extensions: [StarterKit],
  })
</script>

將這個組件帶入你想呈現的畫面，就會看到一個簡單的文字編輯內容
恩...但怎麼沒有格式設定?

2. 使用預設編輯按鈕範例，並做一些調整:

• 改成用useEditor處理
• 安裝文字格式的延伸package: npm install @tiptap/extension-text-style
• TextStyle.configure({ types: [ListItem.name] }: 不確定為什麼typescript讀不到型別，先用指派的方式過關

import { EditorContent, useEditor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import { Color, TextStyle, type TextStyleOptions } from '@tiptap/extension-text-style'
import { ListItem } from '@tiptap/extension-list'

const editor = useEditor({
  extensions: [
    Color.configure({ types: [TextStyle.name, ListItem.name] }),
    TextStyle.configure({ types: [ListItem.name] } as Partial<TextStyleOptions>),
    StarterKit,
  ],
  content: `
    <p>I'm running Tiptap with Vue.js. 🎉</p>
  `,
})

就可以看到出現那些格式編輯的按鈕了

其他

在官網可以看到

1. 長得很像notion的編輯模板，但是要花錢

2. 簡易編輯的模板，要額外安裝
   npx @tiptap/cli@latest add simple-editor
   接著會開始載入tiptap ui元件
   並且提醒要加入css設定
   Add to src/index.css:

   @import './styles/_variables.scss';
   @import './styles/_keyframe-animations.scss';

Without these imports, the editor will not display correctly.
然後在想要顯示的元件裡引入

import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'

發現UI包都是React的tsx，結論如果是用vue的話就自己乖乖刻按鈕吧QQ

參考資料

1. Vue3範例
2. 預設編輯按鈕範例

作者的哈拉

休息一下，晚點再繼續補充
有更新另一種模板帶入的方式