[Editor] String 형태의 HTML 렌더링 하기

[Editor] Quill 에디터 적용하기

---

위 게시물에서 진행한 것처럼 Quill 에디어를 적용한 뒤 고민에 빠졌다.

에디터를 통하여 String 형태로 코드가 바뀌었는 데 그걸 어떻게 HTML 코드로 변환 할 지 도통 감이 잡히지 않다가

 

아래 블로그를 찾았다.

[React.js] Tip: string 형태의 html을 렌더링하기, newline(\n) 을 BR 태그로 변환하기 | VELOPERT.LOG

아래 코드를 사용하면 되는 데 __html에 있는 body는 에디터 내용을 담고 있는 state로 대체 시키면 된다.

{/* string 형태의 html을 렌더링 하는 방법 */}
<div dangerouslySetInnerHTML={{ __html: body }} />

 

F12 > 요소를 한참을 들여다 본 것 같다. 왜 스타일이 안먹히는 거지 싶었다.

원인은 에디터를 감싸고 있는 className이 HTML로 변환한 값을 담는 div에는 없었기 때문이었다.

그래서 아래처럼 바꿔 주었다.

      <div
        className="ql-container ql-snow"
        style={{
          // border: "none",
          background: "#ffffff",
          width: "50%",
        }}
      >
        {/* String 형태의 HTML 렌더링 하는 부분 */}
        <div
          className="ql-editor"
          dangerouslySetInnerHTML={{ __html: body }}
        />
      </div>

 

아래처럼 잘 반영 되는 걸 볼 수 있었다.