Toast UI Editor 오픈소스 워지윅 에디터 Vue.js에 적용해보기

Toast UI Editor는 오픈소스 워지윅 에디터로, Vue.js와 함께 사용할 수 있습니다. 이 글에서는 Vue.js와 Toast UI Editor를 함께 적용하는 방법에 대해 알아보겠습니다.

Step 1: 프로젝트에 Toast UI Editor 추가하기

먼저 프로젝트에 Toast UI Editor를 추가해야 합니다. 이를 위해 다음과 같이 npm을 사용하여 패키지를 설치합니다.

    npm install @toast-ui/editor
    

Step 2: Vue.js 컴포넌트에 Toast UI Editor 추가하기

이제 Toast UI Editor를 Vue.js 컴포넌트에 추가해보겠습니다. 아래와 같이 `App.vue` 파일을 수정하여 Toast UI Editor를 사용할 수 있습니다.

    <template>
      <div id="app">
        <EditorComponent v-model="content" :height="400" :initialEditType="'markdown'" :useCommandShortcut="true" />
      </div>
    </template>

    <script>
    import '@toast-ui/editor/dist/toastui-editor-viewer.css';
    import '@toast-ui/editor/dist/toastui-editor.css';
    import { Editor } from '@toast-ui/vue-editor';

    export default {
      components: {
        'EditorComponent': Editor
      },
      data() {
        return {
          content: ''
        }
      }
    }
    </script>
    

Step 3: 컴포넌트에 데이터 바인딩하기

마지막으로 Toast UI Editor에 데이터를 바인딩하여 에디터 내용을 Vue.js 컴포넌트에서 사용할 수 있도록 설정합니다.

    <template>
      <div id="app">
        <EditorComponent v-model="content" :height="400" :initialEditType="'markdown'" :useCommandShortcut="true" />
        <div v-html="content"></div>
      </div>
    </template>

    <script>
    import '@toast-ui/editor/dist/toastui-editor-viewer.css';
    import '@toast-ui/editor/dist/toastui-editor.css';
    import { Editor } from '@toast-ui/vue-editor';

    export default {
      components: {
        'EditorComponent': Editor
      },
      data() {
        return {
          content: ''
        }
      }
    }
    </script>
    

이제 Vue.js 프로젝트에 Toast UI Editor를 성공적으로 적용하였습니다. 이제 Toast UI Editor의 다양한 기능들을 Vue.js 프로젝트에서 쉽게 사용할 수 있습니다.