Dev Day

Toast Ui Editor 적용하기

 

프로젝트를 진행하다 Nuxt.js에서 텍스트에디터를 사용할 일이 생겨서 이번엔 Nuxt.js에 Toast Ui Editor를 적용하는 방법에 대해 글을 써보려 합니다.

 

처음엔 Toast Ui Editor가 아닌 Quill Editor나 Summernote를 사용해서 진행해 볼까라고 생각하여 Quill Editor와 Summernote 모두 사용해보았습니다. 3가지 텍스트에디터 모두 사용해보았으나 Toast Ui Editor가 저는 가장 편리하고 기능도 괜찮다고 느꼈습니다. (nhn 만세!!)

Quill Editor의 경우 심플하지만 모든 기능을 다 직접 구현해야 하는 번거러움이 있었고 Summernote는 자세히는 써보지 않았지만 저는 딱히 매력을 느끼지 못했습니다.

Toast Ui Editor의 경우 한글지원 및 위지윅(표준어는 위지위그) 지원이 가능했습니다.

 

Nuxt.js에서 Toast Ui Editor를 사용하는 방법에는 두 가지 정도가 있습니다.

tui모듈을 사용

npm으로 Toast Ui Editor 모듈을 install합니다.

$ npm install --save @tui-nuxt/editor

nuxt.config.js 파일에 모듈을 추가해줍니다.

 

tui.vue 페이지를 생성하여 Tuieditor 태그를 넣어줍니다.

page/tui.vue

<template>
  <div id="top">
    <!-- Text Editor -->
    <TuiEditor
      mode="markdown"
      preview-style="vertical"
      height="300px"
    />

    <!-- Markdown Viewer -->
    <TuiEditorViewer
      :value="content"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: 'Hello World!'
    }
  },
};
</script>

<style scoped>

</style>

 

 

그리고 npm run dev로 실행을 시키면 아래와 같이 Toast Ui Editor가 나타납니다.

 

위 와 같이 nuxt모듈을 사용하여 Toast Ui Editor 사용이 가능하며, plugin을 통해 사용도 가능합니다.

 

plugins 사용하기

이번엔 Vue.js용 Toast Ui Editor 모듈을 설치합니다.

$ npm install @toast-ui/vue-editor

 

plugins 디렉토리에 tui-editor.js 파일을 생성해줍니다.

plugins/tui-editor.js

import Vue from 'vue'
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor/dist/i18n/ko-kr';

import '@toast-ui/editor/dist/toastui-editor-viewer.css';

import { Editor, Viewer } from '@toast-ui/vue-editor';

Vue.component('editor', Editor)
Vue.component('viewer', Viewer)

plugin 사용을 위해 nuxt.config.js 파일에 플러그인을 추가해줍니다.

이 후 tui.vue 파일을 아래와 같이 작성해줍니다.

pages/tui.vue

<template>
  <div>
    <editor :initialValue="text" ref="editor" align="left">
    </editor>
    <viewer v-if="toggle" :initialValue="text"></viewer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '# 이곳에 글을 써주세요! 오른쪽은 미리보기 입니다.',
      toggle: false,
    }
  },

};
</script>

<style scoped>

</style>

그럼 아래와 같이 Toast Ui Editor를 사용할 수 있게 됩니다.

 

Toast Ui Editor를 사용할 수 있게 되었지만 저는 이 안에서 사용자가 이미지 파일을 업로드 했을 때,

그 이미지 파일을 백엔드에서 저장하여 url만 반환하고 싶었습니다.

그냥 이미지를 업로드할 경우 base64로 인코딩된 파일명이 생기기 때문에 사용자가 보기도 불편했고 에디터의 데이터를 저장할 때 이미지 파일을 가져와서 저장하자고 하니 정규식등을 써서 저 base64 코드를 짤라와야 하는데 너무 불편할 것 같았습니다. 그래서 Toast Ui Editor에서 이미지를 컨트롤 할 수 있는 옵션이 있는지 확인했는데 가능하여 이 방법을 써서 진행했습니다.

아래와 같이 options에 hooks: {addImageBlobHook: 함수명}을 사용하여 이미지 업로드시 해당 이미지를 가로채서 메서드를 실행시키게 됩니다.

pages/tui.vue

<template>
  <div>
    <editor :options="options" :initialValue="text" ref="editor" align="left">
    </editor>
    <viewer v-if="toggle" :initialValue="text"></viewer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '# 이곳에 글을 써주세요! 오른쪽은 미리보기 입니다.',
      toggle: false,
      options: {
        language: "ko",
        hooks: {
          addImageBlobHook: this.addImageBlobHook
        }
      },
    }
  },
  methods: {
    addImageBlobHook (blob) {
		// code
    },  	
  }
};
</script>

<style scoped>

</style>

 

저는 addImageBlobHook 메서드를 활용하여 백엔드(Spring)에 이미지 데이터를 넘겨줘서 Spring에서 이미지를 저장 후 해당 url만 반환해주는 형식으로 만들었습니다. Spring에서 처리하는 부분은 다음에 따로 글을 작성하도록 하겠습니다.