Nuxt TipTap エディター
基本的な機能を備えた TipTap エディターを Nuxt 3 アプリに即座に追加できます。
クイックセットアップ
- プロジェクトに
nuxt-tiptap-editorの依存関係を追加しますnpx nuxi@latest module add tiptap nuxt.config.tsのmodulesセクションにnuxt-tiptap-editorを追加しますexport default defineNuxtConfig({ modules: ['nuxt-tiptap-editor'], tiptap: { prefix: 'Tiptap', //prefix for Tiptap imports, composables not included }, });- このファイルの内容を参考にしてください。
コードを自分のcomponents/TiptapEditor.vueにコピーします。.vue拡張子を持つcomponentsディレクトリ配下であれば、どのパスでも問題ありません。<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
貢献
有効なプルリクエストはご自由にお送りください。どんな手助けでも大歓迎です！