[React] Toast-UI Editor/Viewer 유튜브 동영상 삽입/표시 방법

Toast-UI 에디터, 뷰어에서 

유튜브를 삽입하고, 표시하는 방법을 정리한다.

 

1. Toast-UI Editor 유튜브 삽입 방법

- 마크다운 모드에서 iframe 으로 유튜브 동영상을 삽입하고, 미리보기(preview) 하는 방법

 

2. Toast-UI Viewer 유튜브 표시 방법

- iframe 으로된 유튜브 공유 태그를 토스트 뷰어에서 렌더링하는 방법

---

1. Toast-UI Editor 유튜브 삽입 방법

- Editor 컴포넌트에 customHTMLRenderer 속성을 추가하고, iframe 을 입력할 수 있도록 정의해준다.

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

export function ToastEditorYoutube() {
  return (
    <div>
      <Editor
        previewStyle="tab"
        initialEditType="markdown"
        toolbarItems={[['bold', 'italic', 'strike']]}
        // 유튜브 삽입 및 미리보기 를 위한 설정(iframe)
        customHTMLRenderer={{
          htmlBlock: {
            iframe(node: any) {
              return [
                {
                  type: 'openTag',
                  tagName: 'iframe',
                  outerNewLine: true,
                  attributes: node.attrs
                },
                { type: 'html', content: node.childrenHTML },
                { type: 'closeTag', tagName: 'iframe', outerNewLine: true }
              ];
            }
          }
        }}
      ></Editor>
    </div>
  );
}

 

이제 유튜브 동영상의 공유용 iframe 태그를 에디터에 복사/붙여넣기 하면,

 

 

아래와 같이 preview에서 미리보기가 가능해진다.

 

2. Toast-UI Viewer 유튜브 표시 방법

- Viewer 컴포넌트의 customHTMLRenderer 속성을 정의하여,

- iframe 태그를 렌더링 할 수 있도록 설정해준다.

// Toast 뷰어 임포트
import "@toast-ui/editor/dist/toastui-editor-viewer.css";
import { Viewer } from "@toast-ui/react-editor";

export default function ToastViewerYoutube({ content }) {
  return (
    <div>
      <Viewer
      	// prop으로 받은 content에는 youtube iframe 태그가 포함되어 있다.
        initialValue={content}
        // 유튜브 삽입 및 미리보기 를 위한 설정(iframe)
        customHTMLRenderer={{
          htmlBlock: {
            iframe(node: any) {
              return [
                {
                  type: "openTag",
                  tagName: "iframe",
                  outerNewLine: true,
                  attributes: node.attrs,
                },
                { type: "html", content: node.childrenHTML },
                {
                  type: "closeTag",
                  tagName: "iframe",
                  outerNewLine: false,
                },
              ];
            },
          },
        }}
      ></Viewer>
    </div>
  );
}

 

- Viewer에 유튜브 동영상이 iframe 삽입된 html 을 넣어주면, 아래와 같이 유튜브가 잘 표시될 것이다.

---

관련하여 참고할 수 있는 공식 문서는 아래와 같다.

https://github.com/nhn/tui.editor/blob/master/docs/ko/custom-block.md