[react]게시판 WYSIWYG(위지윅) 텍스트 에디터(ckEditor 5) 설치하기

웹사이트에 게시판 기능을 만들 때 그냥 <textarea> 를 사용하게 되면 기능도 부실하고 보기에도 허전해 보인다.

 

그렇다고 텍스트 입력 창의 기능을 하나하나 구현하기에는 어려움이 존재한다.

 

그래서 리액트 프로젝트에서 손쉽게 사용할 수 있는 WYSIWYG 에디터를 소개하려고 한다.

 

WYSIWYG 이란?

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

 

이러한 대표적인 WYSIWYG 에디터를 확인하고 싶으면 여기를 눌러서 확인해보자.

 

 

나는 여러 에디터중 ckEditor 를 선택했다.

 

ckEditor는 4 버전이 있고 5버전이 있는데 나는 5버전으로 설치를 진행했다.

 

 

ckEditor 5

ckeditor.com/ckeditor-5/demo/

CKEditor 5 demo - A set of ready to use rich text editors created with a powerful framework

 

ckEditor 4

ckeditor.com/ckeditor-4/

Smart WYSIWYG HTML editor | CKEditor 4

 

 

사이트에 접속해보면 데모버전을 테스트 해 볼 수 있다.

 

ckeditor demo

 

 

 

에디터 설치하기

classic 버전을 설치해보기로 한다.

상단에 Documentation 버튼을 누른다.

 

ckeditor documentation

 

 

 

왼쪽 가이드에서 중간쯤에 React component 를 선택해 주고 메인 다운로드 링크를 복사한다.

 

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

 

 

react component

 

 

 

그리고 내가 사용하고 있는 터미널을 이용해 내가 진행하고 있는 프로젝트 폴더에 입력하고 설치를 진행해준다.

 

나같은 경우에는 기존 프로젝트에 git branch 로 브랜치를 만들어 진행을 했다.

 

혹시모를 버그나 에러를 방지하기 위해서 브랜치에서 작업한 뒤 완성되고 바꿔줄 계획이다.

 

 

git 사용법을 알고 싶으면 다음을 참고하자.

 

2020/10/24 - [프로그래밍/backend] - [git] git 사용법 :: add/commit/log/revert/reset/branch

[git] git 사용법 :: add/commit/log/revert/reset/branch

 

 

 

그 다음에 리액트 프로젝트에 다음과 같은 방법으로 컴포넌트를 임포트 하고 사용하면 된다.

 

ckeditor 설치

 

 

 

프로젝트에 적용한 모습을 보자.

 

ckeditor 적용 모습

위와같이 에디터가 정상 설치된 것을 볼 수 있다.

 

이제 세부적인 기능과 커스터마이징을 할 차례이다. 그 내용은 다음 포스팅에서 진행하겠다.