웹사이트에 게시판 기능을 만들 때 그냥 <textarea> 를 사용하게 되면 기능도 부실하고 보기에도 허전해 보인다.
그렇다고 텍스트 입력 창의 기능을 하나하나 구현하기에는 어려움이 존재한다.
그래서 리액트 프로젝트에서 손쉽게 사용할 수 있는 WYSIWYG 에디터를 소개하려고 한다.
WYSIWYG 이란?
What You See Is What You Get 의 약자로 '보이는 그대로 얻는다' 라는 의미, 즉 문서 편집 과정 도중 포맷 된 형태의 텍스트가 그대로 출력되는 것을 말한다.
이러한 대표적인 WYSIWYG 에디터를 확인하고 싶으면 여기를 눌러서 확인해보자.
나는 여러 에디터중 ckEditor 를 선택했다.
ckEditor는 4 버전이 있고 5버전이 있는데 나는 5버전으로 설치를 진행했다.
ckEditor 5
CKEditor 5 demo - A set of ready to use rich text editors created with a powerful framework
A set of ready to use rich text editors created with a powerful framework.
ckeditor.com
ckEditor 4
Smart WYSIWYG HTML editor | CKEditor 4
Fully customizable WYSIWYG HTML editor with the biggest number of rich text features. Enterprise-grade with 70 languages and the approval of millions.
ckeditor.com
사이트에 접속해보면 데모버전을 테스트 해 볼 수 있다.
에디터 설치하기
classic 버전을 설치해보기로 한다.
상단에 Documentation 버튼을 누른다.
왼쪽 가이드에서 중간쯤에 React component 를 선택해 주고 메인 다운로드 링크를 복사한다.
$ npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
그리고 내가 사용하고 있는 터미널을 이용해 내가 진행하고 있는 프로젝트 폴더에 입력하고 설치를 진행해준다.
나같은 경우에는 기존 프로젝트에 git branch 로 브랜치를 만들어 진행을 했다.
혹시모를 버그나 에러를 방지하기 위해서 브랜치에서 작업한 뒤 완성되고 바꿔줄 계획이다.
git 사용법을 알고 싶으면 다음을 참고하자.
2020/10/24 - [프로그래밍/backend] - [git] git 사용법 :: add/commit/log/revert/reset/branch
[git] git 사용법 :: add/commit/log/revert/reset/branch
1. git 다운로드 및 설치하기 다운로드 링크 git-scm.com/downloads Git - Downloads Downloads Mac OS X Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Cli..
falaner.tistory.com
그 다음에 리액트 프로젝트에 다음과 같은 방법으로 컴포넌트를 임포트 하고 사용하면 된다.
프로젝트에 적용한 모습을 보자.
위와같이 에디터가 정상 설치된 것을 볼 수 있다.
이제 세부적인 기능과 커스터마이징을 할 차례이다. 그 내용은 다음 포스팅에서 진행하겠다.
