[개발 표준 수립] WYSIWYG 에디터 선정

AS-IS

사내 시스템 : 나모웹에디터

24년 신규 프로젝트 : TinyMCE

 

 

요구사항

• 폰트 -  사이즈/볼드/이탤릭
• 폰트 - 서체 커스텀 : Noto Sans 폰트 적용 가능 여부 (일어 한자 깨짐 문제)
  • (KO) Noto Sans Korean
  • (JP) Noto Sans Japanese
  • (CH) Noto Sans Simplified Chinese
• 하이퍼링크
• 표 그리기
• 단락 구분(bullet point 등)
• 반응형 UI
• ❗️Office 호환성 (Ctrl + C, Ctrl + V)
  • 기안 작성시 Office에서 선작업 후 에디터에 붙여넣기 하는 케이스가 많다고 한다.
• 인프라 구조를 CF + S3구조로 갈 것이기 때문에, 이미지/동영상 업로드시 이를 지원하는지 확인 필요.

 

 

React Editor 라이브러리 비교

요구사항	Froala	TinyMCE (v6)
폰트 - 사이즈/볼드/이탤릭	○	○
폰트 - 서체 커스텀	○ https://froala.com/wysiwyg-editor/examples/font-family/	○ https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#font_family_formats
하이퍼링크	○	○ https://www.tiny.cloud/docs/tinymce/6/link/
표 그리기	○	△ https://www.tiny.cloud/docs/tinymce/6/advtable/
단락 구분 (bullet point 등)	○	○ https://www.tiny.cloud/docs/tinymce/6/lists/
반응형 UI	○	○
Office 호환성 (word)	○ 이미지, 표 등이 붙여넣기 가능하며, 기존 style 유지됨	△ 이미지, 표 등이 붙여넣기 가능하며, 기존 style 유지 안됨
Office 호환성 (excel)	○ 셀 붙여넣기 가능하며, 기존 style 유지됨	△ 셀 붙여넣기 가능하며, 기존 style 유지 안됨
Google Docs 호환성	○ 이미지, 표 등이 붙여넣기 가능하며, 기존 style 유지됨	△ 이미지, 표 등이 붙여넣기 가능하며, 기존 style 유지 안됨
Google Sheets 호환성	○ 셀 붙여넣기 가능하며, 기존 style 유지됨	△ 셀 붙여넣기 가능하며, 기존 style 유지 안됨

 

 

 

Froala

🔗 demo

🔗 pricing

가격 정책 (구독)

 

 

 

TinyMCE (v6)

🔗 demo

🔗 pricing

 

 

 

---

+) Office 호환성이 좋지 않아 탈락한 후보들

React Editor 라이브러리 비교

🔗 npm trends

이름	특징	장점	단점
Quill	JavaScript 기반	다운로드 수 가장 많음 TypeScript React18 지원
Toast UI	마크다운/WYSIWYG 둘 다 지원	수식 등 다양한 기능 지원	정렬, 폰트 변경 등 지원되지 않는 기능도 있음
Draft	React 기반 style을 class로 적용하지 않고 style로 적용함		이미지 가운데 정렬 정상 동작 불가 한글 입력시 onEditorStateChange 이벤트 발생하지 않음

 

 

Quill

🔗 demo

• React-Quill 이미지 처리하기

 

 

Toast UI

🔗 demo

NHN Cloud에서 개발한 오픈 소스 라이브러리

• Toast UI Editor에서 s3로 이미지 업로드 하는 방법
• Toast UI Editor 이미지 첨부하기

 

 

Draft

🔗 demo

• npm: draft-js-aws-amplify-s3-plugin
• DraftJS with s3 image upload #2260
• DraftJS Plugins - High quality plugins with great UX