Nuxt TipTap 編輯器
立即將具有基本功能的 TipTap 編輯器新增到您的 Nuxt 3 應用程式中。
快速設定
- 將
nuxt-tiptap-editor依賴項新增到您的專案中npx nuxi@latest module add tiptap - 將
nuxt-tiptap-editor新增到nuxt.config.ts的modules部分export default defineNuxtConfig({ modules: ['nuxt-tiptap-editor'], tiptap: { prefix: 'Tiptap', //prefix for Tiptap imports, composables not included }, }); - 您可以將此檔案內容作為參考。
將程式碼複製到您自己的components/TiptapEditor.vue中。
只要它在components目錄下且帶有.vue副檔名，任何路徑都可以。<template> <div> <div v-if="editor"> <button @click="editor.chain().focus().toggleBold().run()" :disabled="!editor.can().chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" > bold </button> <button @click="editor.chain().focus().toggleItalic().run()" :disabled="!editor.can().chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" > italic </button> <button @click="editor.chain().focus().toggleStrike().run()" :disabled="!editor.can().chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" > strike </button> <button @click="editor.chain().focus().toggleCode().run()" :disabled="!editor.can().chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }" > code </button> <button @click="editor.chain().focus().unsetAllMarks().run()"> clear marks </button> <button @click="editor.chain().focus().clearNodes().run()"> clear nodes </button> <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }" > paragraph </button> <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" > h1 </button> <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" > h2 </button> <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }" > h3 </button> <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }" > h4 </button> <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }" > h5 </button> <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }" > h6 </button> <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" > bullet list </button> <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }" > ordered list </button> <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }" > code block </button> <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }" > blockquote </button> <button @click="editor.chain().focus().setHorizontalRule().run()"> horizontal rule </button> <button @click="editor.chain().focus().setHardBreak().run()"> hard break </button> <button @click="editor.chain().focus().undo().run()" :disabled="!editor.can().chain().focus().undo().run()" > undo </button> <button @click="editor.chain().focus().redo().run()" :disabled="!editor.can().chain().focus().redo().run()" > redo </button> </div> <TiptapEditorContent :editor="editor" /> </div> </template> <script setup> const editor = useEditor({ content: "<p>I'm running Tiptap with Vue.js. 🎉</p>", extensions: [TiptapStarterKit], }); onBeforeUnmount(() => { unref(editor).destroy(); }); </script> - 現在編輯 HTML，將
button替換為您 UI 提供的元件，或者使用 tailwind 或您正在使用的任何 CSS 進行樣式設定，新增圖示或文字，修改活動狀態類，驗證暗模式等。
就是這樣！您現在可以在 Nuxt 應用程式中使用 Nuxt TipTap 編輯器了 ✨
開發
# Install dependencies
yarn install
# Generate type stubs
yarn dev:prepare
# Develop with the playground
yarn dev
# Build the playground
yarn build
# Run ESLint
yarn lint
# Run Vitest
yarn test
yarn test:watch
# Release new version - needs to be with npm for login to work
npm run release
貢獻
歡迎提交任何有效的拉取請求。非常樂意獲得任何幫助！