Stack : Next.js, Typescript, Emotion

개요

유저들이 태그 없이 쉽게 게시글을 작성할 수 있도록 WYSIWYG 에디터, 그 중에서도 TinyMCE 에디터를 프로젝트에 도입할 것이다. TinyMCE 에디터의 장점을 알아보고, 요구사항에 맞춰 메뉴바와 기능을 커스터마이징해보자.

에디터 검토 : 왜 TinyMCE를 선택하였는가?

WYSIWYG 에디터란 (what you see is what you get)의 줄임말로 사용자가 편집화면에 입력한 글자, 컨텐츠 그대로 최종 산물이 화면에 출력되는 에디터다. 운영체제 상에서 동작하는 desktop-based와 웹 상에서 동작하는 javascript-base 에디터로 나뉜다. javascript-base 에디터로 CKeditor, tui-editor 등이 있었지만 TinyMCE를 선택한 이유는 먼저 프로젝트의 백엔드 서버를 Strapi로 구축했는데 Strapi에서 TinyMCE를 쓰고있었다. 다양한 기능이 탑재되어있어 다른 경량형 에디터보다 무겁다는 단점이 있지만, Evernote, Medium, Atlassian 등 유수의 웹 서비스들에서 TinyMCE를 사용하고 있었기 때문에 프로젝트에 도입하게 되었다.

적용 방법

api key 발급

라이브러리를 설명하려면 공홈에 들어가 api key를 발급 받아야한다. 아이디를 생성하면 api key를 받급 받을 수 있다.

• 설치

yarn add @tinymce/tinymce-react

• api key 적용

import { Editor } from '@tinymce/tinymce-react';


const TinyMceContainer = () => {
  return(
    <Editor 
     id = 'tinyEditor',
     apiKey = '발급받은 api key',
	 init={{ .... }},
    >
);
}

툴바 옵션 커스터마이징

다음은 커스터마이징 관련 TinyMCE 공식문서이다.

툴바
https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/
스킨
https://www.tiny.cloud/docs/advanced/creating-a-skin/
아이콘
https://www.tiny.cloud/docs/advanced/creating-an-icon-pack/
로컬 업로드
https://www.tiny.cloud/docs/demo/local-upload/

이 중에서 툴바를 커스터마이징하는 코드를 간단하게 작성해보자.

먼저 TinyMCE에서 기본적으로 제공하는 툴바는 다음과 같다.

그러나 프로젝트 스펙에 필요 없는 옵션이 있다거나 UI를 위해 툴바를 간소화하고 싶을 수 있다.

공식 문서를 보면, 이용 가능한 툴바 옵션들이 표로 정리되어있다.

만약 밑줄과 폰트 색상을 변경하는 기능만 남기고 다 없애고 싶다면 다음과 같이 코드를 작성하면 된다.

import { Editor } from '@tinymce/tinymce-react';

  return(
    <Editor 
      id ='tinyEditor',
      apiKey ='발급받은 api key',
      init = {{ 
        menubar: false,
        toolbar:'underline | forecolor',
    	...
      }},
    />
);

툴바 스타일 커스터마이징

아이콘과 스킨 외에 color, margin, padding 등 툴바 메뉴 스타일을 바꾸고 싶을 수 있다.

먼저 에디터의 기본 스타일은 skin.css라는 파일에서 class명을 활용해 내려주고있다. 따라서 스타일을 바꾸고 싶으면, 상위 컴포넌트를 만든 후 똑같은 class명에 스타일을 주면 된다. 다만 중첩 클래스로 명시도를 따라잡을 수 없기 때문에 !important 를 사용하였다. 만약 색상 버튼에 핑크색 배경색을 넣고 싶다면 적용하고 싶은 요소의 class명을 확인한 뒤, 다음과 같이 코드를 작성하면 된다.

<TestEditorContainer>
   <Editor 
      apiKey ='발급받은 api key',
      init = {{ 
    	...
      }},
    />
</TestEditorContainer>

return (
  const TestEditorContainer = styled.div`
    & .tox-split-button {
      background-color: pink !important;
    }
  `
);

입력값 추출

TinyMCE 에디터의 props interface를 살펴보면, onEditorChange에 함수를 전달하면 입력 값을 반환하는 것을 알 수 있다.

console로 테스트를 해보면

import { Editor } from '@tinymce/tinymce-react';
import { useState, useEffect } from 'react';

const [text, setText] = useState('');

useEffect(() => { console.log(post); }, [post]);

return(
<Editor
	onEditorChange={setText}
/>
);

입력값을 잘 받아오는 것을 확인할 수 있다. react 프로젝트에 적용하는 가이드 및 다양한 예시 코드를 공식 문서로 제공하고 있으니 좀 더 자세한 설명이 필요하면 홈페이지를 방문하는 것을 추천한다.