$$config title: [프로젝트] CKEditor 5 keywords: - IT $$ ## 설치 npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic ## 기본코드 ```js import React, { Component } from 'react'; import { CKEditor } from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; class App extends Component { render() { return (

Using CKEditor 5 build in React

{ // You can store the "editor" and use when it is needed. console.log( 'Editor is ready to use!', editor ); } } onChange={ ( event, editor ) => { const data = editor.getData(); console.log( { event, editor, data } ); } } onBlur={ ( event, editor ) => { console.log( 'Blur.', editor ); } } onFocus={ ( event, editor ) => { console.log( 'Focus.', editor ); } } />

); } } export default App; ``` ## placeholder ```js { ~ ~ ``` ## css 적용 ```css .ck.ck-editor__editable:not(.ck-editor__nested-editable) { min-height: 400px; margin-bottom: 20px; } ``` ## 데이터 HTML 파싱 npm i react-html-parser - CKEditor로 작성한 data는 html 형태(ex. < p>안녕하세요)로 저장된다. - html parser를 다운 받아 저장된 데이터를 '태그가 적용된' 형태로 보여지게 함. ```js import ReactHtmlParser from "react-html-parser"; ~ //viewContent는 저장된 글 내용을 보여주는 state이며, //별도의 버튼에 onClick 이벤트로 글 내용을 state에 저장하게 했다. {viewContent.map((ele) => (

{ele.title}

{ReactHtmlParser(ele.content)}

))} ``` ## buffer 모듈 에러 발생시 npm install buffer