[react]WYSIWYG(위지윅) 텍스트 에디터(ckEditor) 사용하기

 

WYSIWYG 이란?

What You See Is What You Get 의 약자로 '보이는 그대로 얻는다' 라는 의미, 즉 문서 편집 과정 도중 포맷 된 형태의 텍스트가 그대로 출력되는 것을 말한다.

 

게시판 글쓰기 기능을 구현할 때 유용하게 사용을 할 수 있다. 

---

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

처음에 터미널창에 입력을 하여 내가 진행하고 있는 프로젝트 폴더에 설치를 해준다.

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; 

리액트 프로젝트에 컴포넌트를 임포트를 하고 사용하면 된다.

return(
<CKEditor 
                    editor={ ClassicEditor }
                    data="<p>Hello from CKEditor 5!</p>"
                    onReady={ editor => {
                        // 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 });
                        setBoard_cotent({
                          ...board_content,
                          board_content: data
                        })
                      }}
                    onBlur={ ( event, editor ) => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ ( event, editor ) => {
                        console.log( 'Focus.', editor );
                    } }
                />
                </div>
)

위의 코드와 설명은

https://ckeditor.com/ckeditor-5/demo/  참고

 

 

프로젝트에 적용한 모습

 

입력을 하고 전송을 하면 Setboard_content에 넣어서 axios를 이용하여 controller로 보내어 작업을 했다.

 

그대로 값을 넣어서 보내면 DB에 [object Object]로 들어온다.

value값만 받아서 넘기고 싶으면

formData.append("board_content",Object.values(board_content));

이런식으로 Object.values로 변환을 시키고 넘기면

DB에 html 형식 그대로 보낼 수 있다.