[Tiptap + Nuxtjs] 에디터 구현하기

Tiptap

https://tiptap.dev/

 

 

에러

RangeError: Adding different instances of a keyed plugin (plugin$)

 

기능 만들기

Youtube 넣기

작업 결과

https://tiptap.dev/api/nodes/youtube

YouTube – Tiptap Editor

 

컴포넌트 코드

import { Editor, EditorContent } from '@tiptap/vue-2';
import StarterKit from '@tiptap/starter-kit';
import Youtube from '@tiptap/extension-youtube';

export defualt {
  name: "TiptapComponent",
  mounted() {
    this.editor = new Editor({
      extensions: [
        // ⭐️ 유튜브 추가 설정
        Youtube.configure({
          controls: false,
          width: 480, // defualt: 640
          height: 320, // defualt: 480
        }),
      ],
      content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
    });
  },
  methods: {
    addVideo() {
      const url = prompt('Enter YouTube URL');
      this.editor.commands.setYoutubeVideo({
        src: url,
        width: Math.max(320, parseInt(this.width, 10)) || 640,
        height: Math.max(180, parseInt(this.height, 10)) || 480,
      });
    },
  },
}

 

위의 스크립트와 같은 파일 컴포넌트에 <template>

<template>
  <div>
    <div class="flex gap-2 mt-4 mb-2 items-center">
      <!-- ⭐️ 유튜브 버튼 -->
      <button class="hover:bg-[#EAEAEA] rounded p-[10px]" @click="addVideo">
        <img src="~/static/fonts/gguge-icon/Interface/solid_youtube.svg" />
      </button>
    </div>
    <!-- 에디터 영역 -->
    <client-only>
      <editor-content
        :editor="editor"
        class="rounded border w-full h-full max-h-[700px] hover:border-[#777777] overflow-auto"
      />
    </client-only>
  </div>
</template>

 

 

LINK 붙이기

결과

참고: https://tiptap.dev/api/marks/link