<br class="ProseMirror-trailingBreak">로 생기는 toast ui editor 의 br중복 발생 문제 해결

하단 코드는 toast ui Editor 생성후 db에 html코드를 저장하고 , 

editor창에 불러올때 자동으로 br이 추가 생성되는 이슈에 관련한 해결 코드이다.

Toast ui editor는 위즈윅 에디터로, 내부적으로 ProseMirror 라이브러리를 사용하고 있어, 마지막 빈줄을 나타낼때 PromseMirror-trailingBreak 클래스가 추가된 <br>을 자동으로 삽입하여, 중복 된 태그를 만들어 낼수 있다.

이를 해결하기 위해  <Editor/>에 useRef를 연결하여, 저장된 db값을 Editor내부에서 출력해 줄때, <br class="PromseMirror-trailingBreak">의 부분을 &nbsp;로 변경해주면 문제가 해결된다.

import React, { useRef } from "react";
import { Editor } from "@toast-ui/react-editor";

function MyEditor() {
  const editorRef = useRef(null);

  const handleSetContent = () => {
    editorRef.current.getInstance().setValue('<p>&nbsp;</p>');
  };

  const handlePrint = () => {
    console.log(editorRef.current.getInstance().getValue());
  };

  return (
    <div>
      <Editor
        ref={editorRef}
      />
      <button onClick={handleSetContent}>Set Content</button>
      <button onClick={handlePrint}>Print</button>
    </div>
  );
}