[React] TOAST UI Viewer 적용 (+ Editor)

원래 React 프레임워크없이 TOAST UI View와 Editor를 적용했었다.
해당 프로젝트를 하면서 React로 바꾸고 싶어서 코드를 싹 다 갈아엎고 있다.
사실 CSS는 부트스트랩과 복사 붙여넣기가 있으니 빨리 적용 가능했지만 TOAST UI 라이브러리 적용하는 건 진짜 지옥이었다..

Editor

먼저 Editor를 보자.

Editor를 적용하는 건 매우 간단하다. (여기서 import문을 주시하자)

import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/react-editor';

  <Editor
    initialValue="hello react editor world!"
    previewStyle="vertical"
    height="600px"
    initialEditType="markdown"
    useCommandShortcut={true}
  />

위의 코드 하나면 된다. (자세한 설명 링크)

리액트 프레임워크 없이 적용한다면

const editor = new toastui.Editor({
	el: document.querySelector('#editor'),
	previewStyle: 'vertical',
	initialEditType: "markdown",
	height: '600px',
	initialValue: content
});

위의 코드를 쓰면 된다. 거의 비슷하다.

Viewer

근데 도저히 찾아도 React에 Viewer를 적용하는 건 보이지가 않았다..

프레임워크 없이 프론트를 구현했을 때는

<link rel="stylesheet" href="https://uicdn.toast.com/editor/2.0.0/toastui-editor.min.css">
<script src="https://uicdn.toast.com/editor/2.0.0/toastui-editor-all.min.js"></script>
<script>
   // ... 생략

    const viewer = toastui.Editor.factory({
        el: document.querySelector('#viewer'),
        viewer: true,
        height: '500px',
        initialValue: content
    });

    let elem = document.getElementById('editor-hidden');
    viewer.setMarkdown(elem.innerText);
</script>

이런 식으로 코드를 짰다. 사실 저기에도 시간 좀 쏟았는데 리액트는 더더더더... 쏟았다.

다음은 성공한 코드이다.

방법 1

import { Editor } from '@toast-ui/editor';

const viewer = Editor.factory({
  	el: el,
  	viewer: true,
  	height: '500px',
  	initialValue: review.content
});

Editor와 Viewer를 적용할 때 차이점이 안 보일 것이다..

바로 import문이다

import문에서
Editor는 적용할 때는 from '@toast-ui/react-editor';에서 import하고
Viewer를 적용할 때는 `'@toast-ui/editor';에서 import를 한다.

정말.. 이것때문에. . .... .몇 시간을 에러 잡고 있었다... ㅠㅠ 흑

방법 2

그런데 다른 방법도 있었다.
이건 Editor를 쓰지 않아서 동시에 Editor, Viewer를 적용할 수 있다.

import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';

const viewer = new Viewer({
	el: document.querySelector('#viewer'),
    height: '600px',
    initialValue: review.content
});

위의 코드를 적용하면 된다.

ㅋㅋㅋ 그렇게 해서 에디터, 뷰어 모두 넣어봤당...
감격스런지라 이렇게 글을 써본다..

개인 프로젝트하려고 리액트를 시작한 거라.. 많이 미흡해서 이러한 에러를 마주친 걸 수도 있지만
그래도 상쾌해졌다~ ~_ ~

엄청난 주석 처리 ,,

---

Viewer를 훨씬 쉽게 적용할 수 있는 방법을 찾았다. 너무 간단했네..ㅠㅠ

import { Viewer } from '@toast-ui/react-editor';

...
<Viewer initialValue={search.content} />

• 해당 링크 참조

참고 링크

• https://github.com/nhn/tui.editor/blob/master/docs/en/viewer.md
• https://nhn.github.io/tui.editor/latest/tutorial-example04-viewer