[toast-ui eidtor/React/Typescript] toast-ui eidtor 커스텀하기 (+ 이미지 저장, youtube/vimeo 링크 변환)

🤔 서론

회사 프로젝트에서 사용할 에디터가 필요했다. 이전에 CK에디터를 사용해본 적이 있는데, 이상하게도 버전 문제인지 CK에디터가 작동하지 않았고, 차선책으로 quill을 사용해봤으나 구현 후 빌드를 해보니 import에러가 발생해 사용할 수 없었다. 그래서 최종적으로는 toast-ui editor를 사용했고, 직접 툴바의 아이템을 자유롭게 커스텀할 수 있는 만큼 없는 기능이 많아 고생을 했기에 이 과정을 글로 남긴다.

🥅 목표

이미지 저장, youtube/viemo 노출(iframe)이 가능한 toast-ui editor로 커스텀하기

👩🏻‍💻 구현

* {{}} 이렇게 감싼 부분은 직접 넣어야 한다.

결과

전체 코드(에디터)

import React, { useEffect, useRef, useState } from 'react';
import styled from '@emotion/styled';
import axios from 'axios';
/* Toast-UI */
import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
import fontSize from 'tui-editor-plugin-font-size';
import '@toast-ui/editor/dist/i18n/ko-kr';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
import '@toast-ui/editor/dist/toastui-editor.css';
import 'tui-color-picker/dist/tui-color-picker.css';
import { Editor } from '@toast-ui/react-editor';

import { theme } from '@/styles/theme';
interface CustomEditorProps {
  data: string;
  setData: React.Dispatch<React.SetStateAction<string>>;
  reset?: boolean;
  setReset?: React.Dispatch<React.SetStateAction<boolean>>;
}

const CustomEditor: React.FC<CustomEditorProps> = ({ data, setData, reset, setReset }) => {
  const editorRef = useRef<Editor>(null);
  const [isSet, setIsSet] = useState<boolean>(false);

  const toolbarItems = [['heading'], ['bold', 'italic', 'strike'], ['ul', 'ol'], ['image', 'link']];

  const handleSave = () => {
    let htmlContent = editorRef.current && editorRef.current.getInstance().getHTML();
    if (htmlContent) {
      setData(htmlContent);
    }
  };

  // 리셋
  useEffect(() => {
    if (editorRef.current && reset && setReset) {
      editorRef.current.getInstance().setMarkdown('');
      setReset(false);
    }
  }, [reset]);

  // 초기값 세팅
  useEffect(() => {
    if (!isSet && editorRef.current) {
      editorRef.current.getInstance().setMarkdown(data ? data : '');
      setIsSet(true);
    }
  }, []);

  const [load, setLoad] = useState<number>(0);
  useEffect(() => {
    if (load < 2 && data && data != '<p><br></p>' && isSet && editorRef.current) {
      editorRef.current.getInstance().setMarkdown(data);
      setLoad((prev) => prev + 1);
    }
  }, [isSet, data]);

  return (
    <StEditor>
      <Editor
        initialEditType="wysiwyg"
        initialValue={data}
        previewStyle="vertical"
        onChange={handleSave}
        ref={editorRef}
        toolbarItems={toolbarItems}
        hideModeSwitch={true}
        plugins={[colorSyntax, fontSize]}
        placeholder="내용을 입력해주세요"
        language="ko-KR"
        hooks={{
          addImageBlobHook: (blob: any, callback: any) => {
            const formData = new FormData();
            formData.append('upload', blob);
            // 이미지를 서버에 업로드하는 요청
            axios
              .post({{'요청 URL'}}, formData, {
                headers: {
                  'Content-Type': 'multipart/form-data',
                  authorization: {{토큰}},
                  ClientSecret: {{클라이언트 시크릿}},
                },
              })
              .then((response) => {
                // 이미지 업로드 성공 시 이미지 URL을 콜백 함수에 전달하여 에디터에 표시
                const imageUrl = response.data.url;
                callback(imageUrl, '사진 대체 텍스트 입력');
              })
              .catch((error) => {
                // 이미지 업로드 실패 시 에디터에 실패 메시지를 표시
                console.log(error);
                callback('image_load_fail', '사진 대체 텍스트 입력');
              });
          },
        }}
      />
    </StEditor>
  );
};

export default CustomEditor;

const StEditor = styled.div`
  & .toastui-editor-contents {
    z-index: 0;
  }

  & p {
    font-size: 16px;
  }

  & h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    border: none;
  }

  // 폰트 사이즈 입력창
  & .size-input {
    width: 100%;
  }

  & .drop-down-item {
    font-size: 0.6rem;
    padding: 0.5rem 0.2rem;
    cursor: pointer;
  }
`;

Props
받아오는 값은 data, setData, reset, setRest 이렇게 4가지이다.

• data: 에디터 안에 적히는 내용
• setData: 에디터 안의 내용을 변경하는 setState
• reset(optional): 초기화 트리거, default 값은 false
• setReset(optional): 초기화 트리거를 활성화하기 위한 setState

reset과 setReset은 toast-ui editor에서 초기값을 설정할 때 이전 값이 남아있는 이슈가 있어서 임의로 리셋시키기 위해 추가했다. 만약 초기값 설정이 잘 된다면 사용할 필요가 없다.

툴바
툴바에는 두가지 요소를 추가했는데 글자색 변경과 폰트 크기 변경이다. colorSyntax는 toast-ui에서 제공하는 플러그인이고, fontSize는 깃헙에서 다른 분이 만드신 걸 사용했다. 직접 만들어도 되지만 필수로 요청된 사항이 아니었기에 간편하게 사용하고 싶었다. (toast-ui editor에서 플러그인으로 제공하면 더 좋겠지만)

초기값 세팅

  useEffect(() => {
    if (!isSet && editorRef.current) {
      editorRef.current.getInstance().setMarkdown(data ? data : '');
      setIsSet(true);
    }
  }, []);

  const [load, setLoad] = useState<number>(0);
  useEffect(() => {
    if (load < 2 && data && data != '<p><br></p>' && isSet && editorRef.current) {
      editorRef.current.getInstance().setMarkdown(data);
      setLoad((prev) => prev + 1);
    }
  }, [isSet, data]);

해당 부분은 초기값을 세팅하는 부분인데 더 좋은 코드가 있을거라 생각한다. 처음 렌더링됐을 때는 isSet의 값이 false이다. 이때 데이터가 있으면 데이터로 세팅을, 아니면 빈 스트링으로 세팅을 하면서 isSet을 true로 만든다.

아래 useEffect는 처음 에디터 컴포넌트가 렌더링될 때 데이터가 2번 변경되는 이슈 때문에 확실하도록 초기값 data를 두 번 세팅하려고 만든 부분이다. 비효율적으로 보일 수 있지만 초기값 세팅이 잘 되지 않는 이슈 때문에 수정을 5번정도는 한 것 같다.

이미지 업로드

 hooks={{
          addImageBlobHook: (blob: any, callback: any) => {
            const formData = new FormData();
            formData.append('upload', blob);
            // 이미지를 서버에 업로드하는 요청
            axios
              .post({{'요청 URL'}}, formData, {
                headers: {
                  'Content-Type': 'multipart/form-data',
                  authorization: {{토큰}},
                  ClientSecret: {{클라이언트 시크릿}},
                },
              })
              .then((response) => {
                // 이미지 업로드 성공 시 이미지 URL을 콜백 함수에 전달하여 에디터에 표시
                const imageUrl = response.data.url;
                callback(imageUrl, '사진 대체 텍스트 입력');
              })
              .catch((error) => {
                // 이미지 업로드 실패 시 에디터에 실패 메시지를 표시
                callback('image_load_fail', '사진 대체 텍스트 입력');
              });
          },
        }}

이미지 업로드는 검색했을 때 많은 자료가 나올 것이다. 우리는 에디터의 이미지를 S3에 업로드하는 방식을 사용하기 때문에 axios로 S3에 업로드 후 이미지 url을 받았다.

전체코드(에디터 내용 불러오기)

import '@/styles/Watermark.styles.css';

export const convertLink = (data: string | undefined) => {
  if (data) {
    const newData = data.replace(/<a\b[^>]*>(.*?)<\/a>/gi, (match: any) => {
      // <a> 태그의 href 속성을 가져옵니다.
      const hrefMatch = match.match(/href="([^"]*)"/);
      const href = hrefMatch ? hrefMatch[1] : '';

      // href가 Vimeo 동영상의 링크인지 확인
      const isVimeoLink = href.includes('vimeo.com');
      const isYoutubeLinkShare = href.includes('youtu.be');
      const isYoutubeLink = href.includes('youtube.com/watch');

      if (isVimeoLink) {
        const videoIdMatch = href.match(/vimeo\.com\/(\d+)/);
        const videoId = videoIdMatch ? videoIdMatch[1] : '';
        const nickName = localStorage.getItem('nickName');
        return `
        <div style="position: relative;">
          <div class="watermark">${nickName}
          ${videoId}" class="vimeo_vid" width="100%" frameborder="0"></iframe>
        </div>
        `;
      } else if (isYoutubeLinkShare || isYoutubeLink) {
        const videoIdMatch = isYoutubeLinkShare
          ? href.match(/youtu\.be\/([^?&]+)/)
          : href.match(/[?&]v=([^?&]+)/);
        const videoId = videoIdMatch ? videoIdMatch[1] : '';
        return `${videoId}" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>`;
      } else {
        // Vimeo, Youtube 동영상 링크가 아닌 경우에는 <a> 태그에 target="_blank"를 추가하여 반환
        return match.replace(/<a\b/gi, '<a target="_blank"');
      }
    });
    return newData;
  }
};

toast-ui editor에서는 삽입한 link를 a태그의 형태로 저장한다. 그렇기 때문에 불러올 때 iframe으로 보여주고 싶었던 나로서는 a태그를 iframe으로 변환하는 과정이 필요했다. youtube, viemo 두 가지의 영상 링크만 변환을 하면 됐기 때문에 a링크에서 youtube, viemo url의 키워드가 추출되는지 확인하고 변환을 했다. (유튜브의 경우 url입력 필드에서 복사할 수 있는 url과 공유하기 버튼의 url이 달라 두 가지 모두 확인을 해주었다.

 

<div
	dangerouslySetInnerHTML={{       		
    	__html:convertLink(Dompurify.sanitize({{"내용"}})) || '',
	}}
/>

에디터의 내용은 html 형태이기 때문에 불러올 때는 dangerouslySetInnerHTML을 사용해서 불러왔다.

🤔 왜 Dompurify.sanitize를 사용할까?
1. XSS는 악성 사용자가 웹 페이지에 악성 스크립트를 삽입하여 다른 사용자에게 실행되도록 하는 공격이다. 이를 통해 공격자는 사용자의 세션을 탈취하거나, 악성 코드를 실행시키거나, 민감한 데이터를 탈취할 수 있다.
DOMPurify는 사용자 입력 혹은 외부 데이터에서 잠재적으로 위험한 스크립트 태그 및 속성을 제거하여 XSS 공격을 방지한다.
예를 들어, <script> 태그나 onmouseover와 같은 이벤트 핸들러 속성 등을 제거합니다.
2. 웹 애플리케이션은 종종 외부 API나 사용자 입력을 통해 데이터를 수집한다. 이러한 데이터는 신뢰할 수 없으며, 악의적인 내용이 포함될 수 있습니다.
DOMPurify는 이러한 신뢰할 수 없는 데이터를 정화하여, 악성 코드가 포함된 HTML이 웹 페이지에 삽입되는 것을 방지한다. 이를 통해 외부 데이터 소스로부터 오는 보안 위협을 줄일 수 있다.