[react] Toast-Ui-Editor (tui에디터) Viewer/Editor에서 유튜브 썸네일 삽입하기

1. Editor 컴포넌트에 customHTMLRenderer 속성 추가

<Editor
                        forwardedRef={editorRef}
                        previewStyle="tab"
                        height="600px"
                        
                        useCommandShortcut={true}
                        hideModeSwitch={true}
                        toolbarItems={[
                        ['heading', 'bold', 'italic', 'strike'],
                        ['hr', 'quote'],
                        ['ul', 'ol', 'task', 'indent', 'outdent'],
                        ['table', 'image', 'link'],
                        ['code', 'codeblock'],
                        ]}
                        customStyle={editorStyle}
                        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 }
                              ];
                            }
                          }
                        }}

해당 속성은 iframe 태그를 입력할 수 있게 해준다.

 

미리보기 선택시 

 

Editor에서는 미리보기로 썸네일 노출이 가능한대 아직 Viewer에서는 썸네일이 보이지 않는다

 

2. Viewer 유튜브 표시방법

Viewer 태그를 호출하는 화면으로 가서 기존에는 아래와 같이 설정되어있었는데

<Viewer initialValue={list.content} />

customHTMLRenderer 속성을 아래와 같이 추가해준다.

<Viewer initialValue={notice.content}  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에서도 썸네일 노출