[Vue.js] tiptap Editor 연동

🚀 tiptap Editor

이 에디터로 작성되는 내용은 Form의 textarea에 써지는 것이 아니고 div에 HTML로 써지고 미리 정의되어 있는 CSS Style로 형태를 바로바로 보여주는 식인것 같아 보이는 것이에요. 렌더리스라는게 이런 방식을 말하는것이 아닌가 생각이 드는 것이에요.
Tiptap에서는 기본적으로 CSS스타일이 정의 되어 있지 않다고 합니다. 본인에 맞게 설정을 해야 하는 것이에요.
다만 샘플로 제공하고 있는 css를 가져다 사용할 수는 있을 것 같은 것이에요.

 

    🔽  설치

● npm 이용 설치

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

 

● yarn 이용 설치

yarn add @tiptap/vue-3 @tiptap/starter-kit

 

➜  junyharang_dev_commnunity_client git:(master) ✗ npm uninstall @tiptap/vue-3
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: junyharang_dev_commnunity_client@0.1.0
npm ERR! Found: vue@3.2.31
npm ERR! node_modules/vue
npm ERR!   vue@"^3.2.13" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.5.17" from tiptap@1.32.2
npm ERR! node_modules/tiptap
npm ERR!   tiptap@"^1.32.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/juny/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/juny/.npm/_logs/2022-03-22T21_59_03_868Z-debug-0.log
➜  junyharang_dev_commnunity_client git:(master) ✗ npm uninstall @tiptap/vue-3 --force
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: tiptap@1.32.2
npm WARN Found: vue@3.2.31
npm WARN node_modules/vue
npm WARN   peerOptional vue@"^2 || ^3.2.13" from @vue/babel-preset-app@5.0.1
npm WARN   node_modules/@vue/babel-preset-app
npm WARN     @vue/babel-preset-app@"^5.0.1" from @vue/cli-plugin-babel@5.0.1
npm WARN     node_modules/@vue/cli-plugin-babel
npm WARN   5 more (@vue/server-renderer, vue-cookie-next, vue-router, vuex, the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer vue@"^2.5.17" from tiptap@1.32.2
npm WARN node_modules/tiptap
npm WARN   tiptap@"^1.32.2" from the root project
npm WARN   1 more (tiptap-extensions)
npm WARN 
npm WARN Conflicting peer dependency: vue@2.6.14
npm WARN node_modules/vue
npm WARN   peer vue@"^2.5.17" from tiptap@1.32.2
npm WARN   node_modules/tiptap
npm WARN     tiptap@"^1.32.2" from the root project
npm WARN     1 more (tiptap-extensions)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: tiptap-extensions@1.35.2
npm WARN Found: vue@3.2.31
npm WARN node_modules/vue
npm WARN   peerOptional vue@"^2 || ^3.2.13" from @vue/babel-preset-app@5.0.1
npm WARN   node_modules/@vue/babel-preset-app
npm WARN     @vue/babel-preset-app@"^5.0.1" from @vue/cli-plugin-babel@5.0.1
npm WARN     node_modules/@vue/cli-plugin-babel
npm WARN   5 more (@vue/server-renderer, vue-cookie-next, vue-router, vuex, the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer vue@"^2.5.17" from tiptap-extensions@1.35.2
npm WARN node_modules/tiptap-extensions
npm WARN   tiptap-extensions@"^1.35.2" from the root project
npm WARN 
npm WARN Conflicting peer dependency: vue@2.6.14
npm WARN node_modules/vue
npm WARN   peer vue@"^2.5.17" from tiptap-extensions@1.35.2
npm WARN   node_modules/tiptap-extensions
npm WARN     tiptap-extensions@"^1.35.2" from the root project

added 113 packages, removed 54 packages, changed 23 packages, and audited 988 packages in 7s

104 packages are looking for funding
  run `npm fund` for details

9 vulnerabilities (8 moderate, 1 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
➜  junyharang_dev_commnunity_client git:(master) ✗ npm install @tiptap/vue-3 @tiptap/starter-kit

added 36 packages, and audited 1024 packages in 17s

128 packages are looking for funding
  run `npm fund` for details

9 vulnerabilities (8 moderate, 1 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force


➜  junyharang_dev_commnunity_client git:(master) ✗

 

주니하랑은 npm을 이용해서 설치를 해 준 것이에요.

 

   🔽  사용 방법

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

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

export default {
  components: {
    EditorContent,
  },

  data() {
    return {
      editor: null,
    }
  },

  mounted() {
    this.editor = new Editor({
      content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
      extensions: [
        StarterKit,
      ],
    })
  },

  beforeUnmount() {
    this.editor.destroy()
  },
}
</script>

 

기본적인 Code는 위와 같이 이용할 수 있는데, component/Tiptap.vue와 같은 Component를 만들어서 위의 예제 코드를 입력해서 사용할 수 있는 것이에요.

 

또 다른 방법은 Compositon API를 이용하여 `useEditor`를 이용할 수 있는 것이에요.

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

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

export default {
  components: {
    EditorContent,
  },

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

    return { editor }
  },
}
</script>

 

주니하랑은 아래와 같이 이용할 것이에요. 이에 맞추어서 내용을 작성해 볼 것이에요.

<template>
  <div class="editor" v-if="editor">
    <menu-bar class="editor__header" :editor="editor" />
    <!-- 색상선택 -->
    <input
      type="color"
      @input="
        editor
          .chain()
          .focus()
          .setColor($event.target.value)
          .run()
      "
      :value="editor.getAttributes('textStyle').color"
    />
    <!-- 폰트 크기 -->
    <floating-menu
      class="floating-menu"
      :tippy-options="{ duration: 100 }"
      :editor="editor"
      v-if="editor" 
    >
      <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()
            .toggleBulletList()
            .run()
        "
        :class="{ 'is-active': editor.isActive('bulletList') }"
      >
        Bullet List
      </button>
    </floating-menu>
    <!-- 폰트 선택 -->

    <editor-content class="editor__content" :editor="editor" />
  </div>
</template>

<script>
import { Editor, EditorContent, FloatingMenu } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
import TaskList from "@tiptap/extension-task-list";
import TaskItem from "@tiptap/extension-task-item";
import Highlight from "@tiptap/extension-highlight";
import CharacterCount from "@tiptap/extension-character-count";
import TextStyle from "@tiptap/extension-text-style";
import MenuBar from "@/components/tiptap/MenuBar.vue";

import { Color } from "@tiptap/extension-color";
export default {
  components: {
    EditorContent,
    FloatingMenu,
    MenuBar
  },

  data() {
    return {
      editor: null
    };
  },
  mounted() {
    this.editor = new Editor({
      extensions: [
        StarterKit,
        Highlight,
        TaskList,
        TaskItem,
        CharacterCount.configure({
          limit: 10000
        }),
        TextStyle,
        Color
      ],
      content: `
        <h2>
          Hi there,
        </h2>
        <p>
          this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
        </p>
        <p>
          Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
        </p>

        <p>
          I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
        </p>
        <blockquote>
          Wow, that’s amazing. Good work, boy! 👏
          <br />
          — Mom
        </blockquote>
      `
    });
  },

  methods: {
    beforeUnmount() {
      this.editor.destroy();
    }
  }
};
</script>

 

아직 Extention Module을 설치하지 않았기 때문에 Error가 있게 됩니다.

 

🚀 확장 Module 설치하기

Prosemirror Editor의 강점이자 tiptap의 강점은 필요한 기능만 불러와 이용할 수 있다는 것이에요.
확장 기능을 이용하기 위해서는 확장 Module을 추가로 설치해야 하는 것이에요.

 

    🔽  설치

● npm 이용 설치

npm install tiptap-extensions --save



● yarn 이용 설치



이번에도 주니하랑은 yarn을 이용해서 설치 해 볼 것이에요.

 

 

    🔽  사용 방법

최초 설치한 tiptap에 추가로 extensions를 적용하면 되는 것이에요.

 

import { Editor, EditorContent } from 'tiptap' 
import { Heading } from 'tiptap-extensions' 

const editor = new Editor({ 
	extensions: [ new Heading(), ], 
})

 

`extensions: [ new Heading() ]`처럼 필요한 기능의 객체(인스턴스)를 추가해서 불러와서 이용하면 되는 것이에요.

또한 각 기능의 인스턴스는 자신만의 설정을 추가 / 변경할 수 있는 것이에요. 그래서 불러 올 기능의 설정값도 잘 살펴봐야 Error를 최소화 할 수 있는 것이에요. `Heaing()`의 경우 아래와 같이 `level` Option`도 있는 것이에요.

 

const editor = new Editor({
	new Heading({
    	leve: [1, 2, 3],
    }),
})

 

`tiptap-extensions`에는 다양한 기능들이 준비 되어 있는 것이에요.

import { Editor, EditorContent } from 'tiptap'
import { Bold, Italic, Link, HardBreak, Heading } from 'tiptap-extensions'

const editor = new Editor({
	extensions: [
    	new Bold(),
        new Italic(),
        new Link(),
        new HardBread(),
        new Haading()
    ],
})

 

 

    🔽  화면

        📦 DevInquryReplyVO.java

안녕하세요.

 

 

 

 

 

 

주니하랑이 작성한 내용이 도움이 되셨으면 좋겠습니다!
혹시라도 잘 못된 정보가 있다면 댓글에 소중한 피드백 부탁 드리겠습니다!

'주니하랑'의 Blog 글은 따로 보관하시지 마시고, '주니하랑' Blog에서 여러분을 항상 기다리고 있으니 이 곳에서 이용 해 주시면 고맙겠습니다.

일부 정보를 퍼가셔서 정리를 하고자 하실 때는 반드시 아래와 같이 출처를 남겨 주시기 바라겠습니다.

출처 : 주니하랑 개발 Blog - '[Blog URL]'

ⓒ 2022. '주니하랑' all rights reserved.
junyharang8592@gmail.com