NextJS에서 ToastUi-Editor 사용하기(feat. TS)

고려해야할 점

1. Next는 SSR이라서 클라이언트에서만 ToastUi-Editor를 dynamic import를 해와야함

 

2. Next에서의 환경변수는 .env.local파일안에서 클라이언트에서만 사용할 것은 밑에 처럼 NEXT_PUBLIC_ 키워드가 앞     에 붙어야한다

3. dynamic import를 사용했기에 ref를 제대로 가져오지 못한다 그래서 React.fowardRef()를 사용해서 ref를 가져와야함

 

 

dynamic import

API에서 제공하는 타입

타입

동적 import

 

 

React.fowardRef()

해당 type들

Editor의 type을 적용하는 게 애먹었던 기억이 난다...

ref 설정

사용하기

참고자료

https://myeongjae.kim/blog/2020/04/05/tui-editor-with-nextjs

https://velog.io/@broccoliindb/Next.js-Editor-SSR-REF-이슈

https://dev.to/brandonwie/implement-toastui-editor-with-nextjs-w-typescript-101

 

 

Editor 코드

import React, { useState, useEffect, MutableRefObject } from 'react';
import S3 from 'react-aws-s3-typescript';
import { v4 as uuidv4 } from 'uuid';
import { Editor, EditorProps } from '@toast-ui/react-editor';
import '@toast-ui/editor/dist/toastui-editor.css';
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
import colorSyntax, {
  PluginOptions,
} from '@toast-ui/editor-plugin-color-syntax';

window.Buffer = window.Buffer || require('buffer').Buffer;

export interface TuiWithForwardedRefProps extends EditorProps {
  forwardedRef: MutableRefObject<Editor>;
  colorSyntaxOptions?: PluginOptions;
}

const EditorForm: React.FC<TuiWithForwardedRefProps> = props => {
  const { forwardedRef } = props;
  const [text, setText] = useState('');

  useEffect(() => {
    if (forwardedRef.current) {
      forwardedRef.current.getInstance().removeHook('addImageBlobHook');

      forwardedRef.current
        .getInstance()
        .addHook('addImageBlobHook', async (blob, callback) => {
          const s3config = {
            bucketName: process.env.NEXT_PUBLIC_S3_UPLOAD_BUCKET as string,
            region: process.env.NEXT_PUBLIC_S3_UPLOAD_REGION as string,
            accessKeyId: process.env.NEXT_PUBLIC_S3_UPLOAD_KEY as string,
            secretAccessKey: process.env.NEXT_PUBLIC_S3_UPLOAD_SECRET as string,
          };

          const ReactS3Client = new S3(s3config);

          try {
            const res = await ReactS3Client.uploadFile(blob, uuidv4());
            callback(res.location, 'imageURL');
          } catch (error) {
            console.log(error);
          }
        });
    }
  }, []);

  return (
    <>
      <Editor
        {...props}
        ref={forwardedRef}
        placeholder="내용을 입력해주세요"
        previewStyle="vertical"
        height="800px"
        initialEditType="markdown"
        useCommandShortcut={true}
        plugins={[colorSyntax]}
      />
      <button
        onClick={() => {
          console.log(forwardedRef.current.getInstance().getHTML());
        }}
      >
        {' '}
        확인
      </button>
    </>
  );
};

export default EditorForm;