WYSIWYG 란?

Intro

우아한 테크 러닝에서 미니 노션 구현 시 사용할 라이브러리들에 대해 조사해야 했다.

WYSIWYG 란?

• 'What You See Is What You Get, 보는 대로 얻는다' 라는 뜻으로 말 그대로 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다.
• 커뮤니티 형태의 사이트에서는 글을 작성하는 곳에서 이 위지위그 에디터들이 사용된다. 간단하게 글자를 굵게 만드는 것부터, 이미지 삽입, 동영상 삽입, 특정 정보 삽입까지 복잡한 역할도 수행할 수 있다.

Slate

• Slate is a completely customizable framework for building rich text editors.
• https://www.slatejs.org/examples/richtext

장점

• 쉬움 : 다양한 예제들로 어렵지 않게 기본적인 기능을 구현할 수 있다.
• 다양한 플러그인 : History 관련 플러그인부터 Table, HTML 복사 관련 플러그인까지 적지 않은 수의 플러그인이 있다.
  • https://github.com/Canner/canner-slate-editor

단점

• 미흡한 한글 지원

Draft.js

• Draft.js는 Facebook에서 만든 위지위그 에디터이다.
• 케치프레이즈도 Rich Text Editor Framework for React( 리액트를 위한 리치 텍스트 에디터 프레임워크 )이다. 같은 Facebook이라는 아버지에 나온 아들인 셈이다.
• https://draftjs.org/

장점

• React와의 호환성 : 같은 아버지를 둔 자식들이니 호환성은 최고다. Slate와 비교해도 더 가볍다는 느낌이 들었다. 그리고 Facebook에서 만들었다는 이유 하나만으로도 뭔가 믿음이 간다.
• 괜찮은 한글 지원 :위에 적었던 Slate에서의 한글 지원 문제를 해결한 위지위그 에디터를 찾다가 다시 돌아온 곳이 Draft.js 였다. Draft.js에서는 Slate에서 겪었던 한글 입력 관련 버그를 찾지 못했다.
• 자체 기능 : 사진을 붙여넣기 할 시 사진 이모지를 넣어주는 등 특이한 자체 기능이 있다.

단점

• 중수를 위한 위지위그 : Slate에 비해 Docs도 간단한 내용들만 있고 예제도 자세하지 않았다. 다른 위지위그를 사용했다면 쉽게 사용할 수 있을 것이다.

https://geonlee.tistory.com/6