[CKEditor] html 파싱 오류, 태그 속성 사라지는 현상 해결하기 / HTML parser

 

[CKEditor_ HTML Parser]

 

CKEditor로 입력한 내용을 받아왔을 때 html 태그 속성이 사라지는 현상을 해결하는 방법에 대해 알아보자

 

---

 

<STUDY>

 

❔ CKEditor 사용법은 이전 포스팅을 참고해 주세요.

   👉 [CKEditor5] 리액트에서 CKEditor5 사용하기

 

CKEditor를 사용하여 게시판 글 등록 페이지를 만들었는데 상세보기로 내용을 넣으니

html 태그 속성이 적용되지 않고 태그가 그대로 노출되는 현상이 발생했다.

 

예를 들면,

제목 1 속성으로 안녕하세요를 입력했을 때

 

안녕하세요

 

이렇게 나타나야 하는데 화면에는

 

<h1>안녕하세요</h1>

 

이렇게 나타났다.

 

이 현상을 해결하려면 HTML Parser라는 라이브러리가 필요한데 프로젝트에서 리액트로 개발을 진행중이었기 때문에

react-html-parser 라는 라이브러리를 사용했다.

 

1. 설치

npm install react-html-parser

or

yarn add react-html-parser

 

 

2. 적용

import React from 'react';
import ReactHtmlParser from 'react-html-parser';
 
export default function App() {
  const html = '<h1>안녕하세요</h1>'; // contents
  
  return(
    <Box>{ ReactHtmlParser(html) }</Box>
  )
}

   - 이렇게 ReactHtmlParser() 안에 내용을넣어주면 태그가 직접 표시되지 않고 속성이 잘 적용되는 것을 볼 수 있다.

 

 

<자세한 내용은 홈페이지를 확인해 주세요.>

 

react-html-parser