React wysiwyg Editor

wysiwyg

작업한 그대로 결과물을 만들어 줌.

react-draft-wysiwyg

페이스북에서 관리하는 draft.js 에디터를 리액트용으로 만든 것.

장점

1. 문서가 잘 되있음.
2. 막히는 부분은 개발 커뮤니티 통해 해결 가능

단점

1. 한글 입력 시 바로바로 onChange가 되지 않아 글자를 작성하고 바로 shift + enter키를 입력할 때 상태값이 변하지 않아 꼬이는 현상이 발생함. 그에 따라, 기존에 작성중이던 글자들이 삭제되는 현상이 발생함.
2. 이미지 등록 시 발생하는 Unknown DraftEntity key: null.에러가 발생하는데, 이 문제도 이미지를 등록 후 한글로 작성 시에 생기는 오류인 것 같다는 생각.

react-quil

draft와 함께 에디터의 양대산맥을 이루는 오픈소스 에디터

장점

1. 많은 이용자
2. 사용이 간편함
3. 기능, 디자인 쉽게 수정 가능

단점

1. 이미지를 업로드하게 되면 <img src='엄청나게 긴 base64 문자열=이미지'/>과 같이 엄청나게 긴 문자열이 생김.
   이 링크를 통해 직접 이미지를 업로드해보시면 알 수 있음. 따라서 따로 처리를 해줘야 한다는 이슈가 있음.
   -> 라이브러리로 쉽게 수정 가능

Toast UI Editor

NHN에서 개발한 국내 유일의 Github 1만 스타를 달성한 에디터. 하지만 wysiwyg에디터보다 UI에디터라는 말이 맞게끔 마크업 언어로 작성한 것들을 태그화해서 표시.

게시판에 글을 쓰는 것보다는 홈페이지의 페이지를 에디터로 작성한다는 느낌. 즉, 글을 쓰는 것이 아니라 페이지를 만드는 느낌.
따라서 일반 사용자가 사용하기엔 부적합하며 마크업언어를 어느정도 숙지할 수 있는 개발자의 관점에서 좋은 에디터.

참고
https://velog.io/@wiostz98kr/React-Quill%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EA%B2%8C%EC%8B%9C%EA%B8%80-%EC%97%90%EB%94%94%ED%84%B0-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

https://velog.io/@kingyong9169/react-%EC%97%90%EB%94%94%ED%84%B0-%EB%8F%84%EC%9E%85-%EA%B3%A0%EB%AF%BC