[NEXT] TOAST Editor Viewer 사용하기

• 1.TOAST Editor에 사용하기
• 2.TOAST Editor에 작성한 글정보 불러오기(useRef)
• 3.TOAST Editor에서 이미지 업로드하기(hooks)
• 4.TOAST Editor Viewer 사용하기
• 5.TOAST Editor customHTMLSanitizer 사용하기

TOAST Editor Viewer 사용하기

예전에 React Quill의 경우에는 Viewer를 따로 제공하지 않고, readOnly 속성을 통해 편집기와 뷰어를 구분하여 사용할 수 있었다.

하지만 TOAST Editor의 경우에는 아예 Viewer를 따로 제공하고 있었다.

문서에서는 찾지 못했는데, 타입에 아래와 같이 정의가 되어 있어서 사용해봤다.

export class Viewer extends Component<ViewerProps> {
  getInstance(): ToastuiEditorViewer;

  getRootElement(): HTMLElement;
}

이제 상세 페이지에 Viewer를 적용해보자.

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

export default function EditorViewer({
  initialValue,
}: {
  initialValue: string;
}) {
  return <Viewer initialValue={initialValue} />;
}

상위 컴포넌트에서 Props로 initialValue에 컨텐츠 정보를 받아오고, 이것을 단순히 Viewer에 전달해주기만 하면 된다.

Viewer의 경우에도 import시 아래와 같이 dynamic import를 사용해야한다.

const EditorViewer = dynamic(() => import('@/components/post/EditorViewer'), {
  ssr: false,
});

적용한 결과는 아래와 같다.