우리 서비스에 가장 알맞은 Editor라이브러리를 찾기 위해 Editor 라이브러리를 정리해보자.
진짜 너무 많아서 최대한 추려보았다.
조건
- 이미지업로드가 가능해야 하고 이미지랑 글을 번갈아가면서 삽입 가능하고 보내고 받을때 편해야함
- 드래그앤드롭이 되면 더 좋음
- 에디터에서 제공하는 필수적인 옵션들 제공(폰트 크기, 색상 등등)
- 개발자를 타겟으로한 서비스이다보니까 마크다운을 지원
- 벨로그처럼 미리보기 지원
- 한국어 지원
후보
Toast UI Editor
NHN에서 지원하는 에디터
- 마크다운과 위지윅 두 버전 모두 지원
- 공식문서 매우 친절
- UI가 아주 깔끔함
- 사용한 사람들이 국내에 은근 있어서 자료가 꽤 있음
- 업데이트도 자주 하는듯 함
- 이미지 추가시, base64로 변환되어 string값으로 들어감
- 미리보기 제공
- 한국어 지원
- 멀티 이미지 업로드 O → 제공하지는 않고 editorRef 사용하면 가능
- 폰트 변경 X
- 유투브 영상 임베디드 X
- 안드로이드에서 오류가 난다는 소리가 있음
react-quil
- npm trend 상에서 가장 인기 있음
- 한국어 지원
- 이미지 추가시, base64로 변환되어 string값으로 들어감
- 이미지 리사이즈 기능 O
- 폰트 변경 O
- 유투브 영상 임베디드 O
- 리액트 18 지원
- 멀티 이미지 업로드 X
TinyMCE
- UI 깔끔
- 유투브 영상 임베디드 O
- 이미지 리사이즈 O
- 멀티 이미지 업로드 X
- 무거움
- 정보가 별로 없음
remirror
prosemirror
react-markdown
결론
풍부한 생태계 + 공식문서 잘되어 있음
한국어 지원
UI 이쁨
마크다운이랑 위지윅 모두 지원
—> 리액트 18과 호환이 안되는 점이 생각ㄷ보다 치명적이어서 안쓰기로 결정 ㅠㅠ 편하긴 했는데ㅠㅠㅠㅠ
react-md-editor를 사용하기로 결정
- 마크다운 지원
- 뷰어 지원ㄷㄷㄷ
- 한글 지원
- 이미지 복붙 지원안함 → 커스텀해서 해결가능
- 미리보기 지원
- 툴바 옵션 제공(이건 사실 그닥 필요 없음)