Nuxt3에서 toast-ui/editor 사용하기

사이드 프로젝트에 에디터 기능이 필요해 toast-ui/editor를 테스트 하게 되었습니다.

회사에서 이미 구현하여 쓰고 있었기에 큰 어려움은 없었으나 오랜만에 새로 붙이다보니 조금 헤맸네요..

내가 했던건데 헤매서 초기 셋팅을 까먹지 않기 위해 글을 남깁니다

우선 toast-ui/editor는

1. npm install @toast-ui/editor
2. npm install @toast-ui/vue-editor

둘 중 하나를 선택하여 설치할 수 있습니다.

여기서 주의할 점이 하나 있습니다.
2번의 @toast-ui/vue-editor는 vue에서 사용하기 편리하도록 랩핑한 라이브러리입니다.
하지만 아쉽게도 vue3를 지원하지 않습니다.

그렇기에 vue3를 사용하고 계신다면 2번은 설치가 불가능합니다.

설치시 아래와 같은 에러가 발생합니다

에러 스크립트에서 설명하는대로
--force 혹은 --legacy-peer-deps 를 사용하여 설치하는 할 수 있으나 굳이 지원하지 않는 버전을 사용하고 싶지는 않아서 패스했습니다.

---

그런고로 앞서 말씀드린 npm install @toast-ui/editor 명령어를 통해 설치해줍시다.

페이지나 컴포넌트에 바로 붙여도
저는 다른곳에서도 쉽게 사용하기 위해 컴포저블로 구현했습니다.

// composables/useToastEditor.ts

import Editor from "@toast-ui/editor";
import "@toast-ui/editor/dist/toastui-editor.css";
import "@toast-ui/editor/dist/i18n/ko-kr";

export const toastEditorInstance = (
  divId: HTMLElement,
  initialEditType: string,
  hideModeSwitch: boolean,
  autofocus: boolean,
  height: string
) => {
  return new Editor({
    el: divId,
    initialEditType: initialEditType,
    hideModeSwitch: hideModeSwitch,
    language: "ko-KR",
    autofocus: autofocus,
    height: height,
    hooks: {
      // addImageBlobHook: async (blob: Blob, callback) => { }
    },
  });
};

우선 editor와 관련 css 및 lang 파일을 임포트해줍니다.
저는 몇가지의 옵션만 지정했으나, 실제로 더 많은 옵션이 존재합니다.

---

!중요

toast-ui/editor 를 설치하고 처음 임포트하면

와 같은 에러를 마주하실텐데 무슨 에러인지 살펴보면

이 오류는 연결된 해당 라이브러리에 typescript 모듈 정의가 되어있지 않아 발생한 오류입니다.

해결법은 우리가 직접 정의해주면 됩니다!.

1. 프로젝트 루트 경로에 ts 폴더를 만들어 줍니다.
2. ts 폴더 안에 types 폴더를 만들어 줍니다.
3. toast-editor.d.ts 파일을 만들어 줍니다.
4. toast-editor.d.ts 파일 안에 아래와 같이 작성해줍니다.

declare module "@toast-ui/editor" {
  import { Editor } from "@toast-ui/editor";

  export default Editor;
}

완료되었다면 위의 에러는 사라지게 됩니다.
물론 폴더 구조는 본인이 원하는대로 잡아도 됩니다!

그런데 실제로 노드 모듈에서 설치된 toast-ui/editor를 열어보면 타입 정의가 되어있는데 이런 에러가 발생하는 것 같은데
혹시 이거 다른 해결법 아시는 선생님들은 댓글로 알려주세요!!

---

이제 테스트 페이지에서 확인해봅시다

// /editor/toast.vue

<script lang="ts" setup>
const editor = ref();

const getContent = () => {
  const content = editor.value.getHTML();

  alert("콘솔을 확인해주세요");

  console.log(content);
};

onMounted(() => {
  editor.value = toastEditorInstance(
    editor.value,
    "wysiwyg",
    false,
    false,
    "50vh"
  );
});
</script>

<template>
    <div ref="editor"></div>
</template>

자 이렇게 작성하고 해당 페이지에 들어가면

짜잔! 이런 에러가 발생하실겁니다. ㅋㅋㅋ

이 에러는
toast-ui/edtior가 ssr을 지원하지 않아서 생기는 문제입니다.

nuxtConfig.ts 에서 다음과 같이 설정해줍시다.

// nuxtconfig.ts

export default defineNuxtConfig({
  devtools: { enabled: true },

  nitro: {
    routeRules: {
      // toast-ui editor 가 SSR 을 지원하지 않아 reload시 에러가 나는것을 방지
      "editor/toast": {
        ssr: false,
      }, 
    },
  },
});

해당 페이지에서는 ssr 기능을 사용하지 않도록 설정해주면 해결이 가능합니다.

자 다시 페이지에 접근해보면

정상적으로 나오는 것을 확인할 수 있습니다.