[Vue + typescript] text editor 사용하기 - tiptap

VUE.JS 목록

 

tiptap 설치

$ npm install @tiptap/vue-2 @tiptap/starter-kit

 

tiptap 설정

<template>
  <content>
    <h2>게시판</h2>
    <div class="wrap">
      <v-form>
        <v-row>
          <v-col>
            <v-subheader>내용</v-subheader>
            <editor-content :editor="editor" />
          </v-col>
        </v-row>
      </v-form>
    </div>
  </content>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Editor, EditorContent } from '@tiptap/vue-2'
import StarterKit from '@tiptap/starter-kit'

@Component({
  components: {
    EditorContent
  }
})
export default class NoticeView extends Vue {
  editor:Editor | null = null

  mounted () {
    this.editor = new Editor({
      content: '<h1>안녕하세요.</h1>',
      extensions: [
        StarterKit
      ]
    })
  }

  beforeDestroy () {
    if (this.editor !== null) {
      this.editor.destroy()
    }
  }
}
</script>

 

메뉴바 설정

https://tiptap.dev/examples/collaborative-editing

위와 같은 메뉴바를 설정해봅니다.

 

 

https://github.com/ueberdosis/tiptap/tree/main/demos/src/Examples/CollaborativeEditing/Vue

tiptap github 사이트에서

Examples >  CollaborativeEditing > Vue 에서 내용을 가져와서 적용합니다.

 

 

 

 

 

 

 

VUE.JS 목록