Tiptap 사용법

vue 프로젝트를 하다가 실시간으로 공동 편집을 할 수 있는 텍스트 에디터를 찾아보면 prosemirror 기반의 것을 사용해야할 것이라고 생각되요.

그중에 tiptap 라이브러리를 소개하려고합니다.

나만 그런건지 모르겠지만. 이거 문서만 보거나 하면 css라던가 Options이 잘 안먹는다. 그래서 삽질했던 것들을 적어보려고합니다.

우선 tiptap 사이트에 가봅시다.

https://tiptap.scrumpy.io/

tiptap

처음 다운로드하는 것은 간단합니다.

npm install --save tiptap tiptap-extensions
// or
yarn add tiptap tiptap-extensions

npm이나 yarn으로 설치가 가능합니다.

설치 후 

( 다양한 것들이 있지만, 이 글에서는 Basic만 다루도록 하겠습니다. )

< tiptap editor Basic >

여기서 아래의 show code를 클릭해서 github에서 코드를 보며 해도 되고 documentation에서 코드 보고 초기 세팅하여도됩니다.

저는 초기 세팅은 이렇게 해봤습니다.

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

<script>
import { Editor, EditorContent } from 'tiptap'
export default {
  components: {
    EditorContent,
  },
  data() {
    return {
      editor: new Editor({
        extensions: [
        ],
        content: `
          하이 앉은민
        `,
      }),
    }
  },
  beforeDestroy() {
    this.editor.destroy()
  },
}
</script>

.. 결과는 기본 vue 프로젝트에서 하면 

< vue 프로젝트에서 tiptap 초기 세팅 >

이렇게 화면이 나타납니다.

그런데.. 뭔가.. 위에서 본 tiptap basic이랑은 너무 다릅니다..

basic이랑 같게 만들어 보겠습니다.

< tiptap editor basic > show code를 누르면 github 페이지가 나오는데, index.vue를 클릭 해 줍니다.

https://github.com/scrumpy/tiptap/blob/master/examples/Components/Routes/Basic/index.vue

scrumpy/tiptap

저는... ㅎ.ㅎ 그냥 그대로 붙여넣기로 가려고 합니다. ㅎ

< 아이콘 에러 >

붙여넣을꺼.. 그냥 다 붙여넣어야 겠다는 생각에... tiptpa github에서 그냥 다운로드 해봅니다.

< tiptap github 다운로드 >

참고로 vue 프로젝트에서 scss를 사용해야합니다.. 
( 사용법은 https://cpdev.tistory.com/109 여기 링크 걸어두겠습니다. ) 

다운로드를 받고나면 examples 폴더로 들어가서

< tiptap sass files >

이 파일을들 내 프로젝트에 옮겨 놓으셔야합니다.

< 프로젝트 내 styles 폴더 >

저는 이렇게 styles라는 폴더를 만들어서 tiptap scss 파일들을 모아놨어요.

모두 옮겼다면 main.js에서 import 해줍니다.

import Vue from 'vue'
import App from './App.vue'
import './styles/tiptap/main.scss'; //<<이부분입니다.
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

그리고... 필요한게.. Icon입니다.

< tiptap 아이콘 svg 파일이 있는 경로 >

이 경로에 있는 모든 파일들을..!! 저는 이렇게 했습니다.

< assets에 icon svg파일들 >

만들어져있는 assets 폴더에 tiptap을 만들어서 icons폴더를 통채로 넣어버렸어요.ㅎ

그리고 template 부분을 

https://github.com/scrumpy/tiptap/blob/master/examples/Components/Routes/Basic/index.vue

scrumpy/tiptap

여기의 코드들을 복붙한 다음에 

 <icon name="bold" />

이러한 icon 컴포넌트들을

<img class="icon" src="@/assets/tiptap/icons/bold.svg" alt="">

이렇게 바꾸어주었습니다. (정답은 아닐 수 있어요..);

모든 icon 컴포넌트들을 img 태그로 바꾸어주고 src만 name에 맞게 해주고 .svg만 붙여주면 이미지가 잘 나옵니다.

그리고...

<style lang="scss" scope>
.icon {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 .3rem;
  top: -.05rem;
  fill: currentColor;

  // &.has-align-fix {
  // 	top: -.1rem;
  // }

  &__svg {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
  }

  &:first-child {
    margin-left: 0;
  }

  &:last-child {
    margin-right: 0;
  }

}

// svg sprite
body > svg,
.icon use > svg,
symbol {
  path,
  rect,
  circle,
  g {
    fill: currentColor;
    stroke: none;
  }

  *[d="M0 0h24v24H0z"] {
    display: none;
  }
}
  
</style>

style에 이러한 코드를 넣어주면 됩니다. 이 scss 코드는 여기 있습니다.

<tiptap이 적용된 vue 프로젝트 화면 >

그러면 짜잔.

나타납니다. ..

이런한 방식으로 여러가지 적용해보면 좋을 것 같아요. 

 

Tiptap은 renderless로 개발되었기 때문에.. markup이나 style을 조작할 수 있지만 이게 곧 장점이자 단점인 것 같아요.

 

! 만약 tiptap에서 엔터키를 눌렀을 때 에러와 함께 prosemirro-model 관련 에러가 난다면 tiptap의 버전을 내려서 되는 버전을 찾아 사용해야할 것 같아요.

최신버전이 가끔 문제가 생겨요... 저는 1.26.4버전으로 했어요.

계속 안되면. 

yarn remove tiptap tiptap-extensions

로 삭제 후에  tiptap만 깔아서 버전 바꿔가면서 (지웠다가 까는거에요..)

yarn add tiptap@1.12.4

( 이런식으로 @뒤에 버전을 쓰면 해당 버전을 다운받아요. )

엔터키가 되는 버전을 맞춘 다음에 tiptap-extensions로 깔아서 해보세요..

여러번 하다가 이렇게하니깐 되네요..