위지윅(WYSIWYG)이란?
위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다.
쉽게 말해서 우리가 티스토리에서 글쓰기를 눌렀을 때 나오는 에디터가 WYSIWYG 에디터입니다.
HTML <textarea> 태그에서 bold, italic 등을 적용할 수 있고, 적용되자마자 보인다고 생각하면 편합니다.
위지윅 에디터를 이용하기에 앞서
처음 개발 프로젝트에서 위지윅 에디터가 필요해서 직접 구현하려고 했습니다. 보통 웹에서 에디터를 개발할 때는 contentEditable과 document.execCommand()를 이용합니다.
그런데 contentEditable은 표준이 아니기 때문에 브라우저마다 다르게 동작합니다. 예를 들어 브라우저마다 bold를 표시할 때 <b> 태그를 사용하기도 하고, <strong> 태그를 사용하기도 합니다. 그뿐만 아니라 줄 바꿈 또한 <br>와 <div>를 사용하는 등 마찬가지입니다. 심지어 document.execCommand()의 명령어 동작도 브라우저마다 다르다고 합니다.
그리고 document.execCommand()의 동작 방식은 선택영역의 양쪽에 태그를 삽입하는 식이기 때문에 아래와 같은 불상사가 발생했을 때 대처하기 힘듭니다. 태그끼리 꼬이는 현상입니다.
물론 이런 부분들을 직접 해결할 수 있었지만, 시간적인 제약도 있고, 요즘에는 잘 구현되어있는 WYSIWYG 에디터들이 많아서 이것 중에 하나를 이용하기로 했습니다.
- Quill
- Draft.js
- Summernote
- TinyMCE
이 포스팅에서는 각 에디터를 비교하지 않습니다. 직접 조금씩 사용해본 결과 Draft.js가 가장 마음에 들어서 활용해보기로 했습니다.
직접 이용한 Draft.js
문서도 잘 되어있고, 막히는 부분은 개발 커뮤니티를 통해서 충분히 해결 가능했습니다. 기본적으로 다양한 블록 스타일과 선택 영역 스타일을 제공합니다.
블록 스타일: h1~h6, ul, ol, blockquote, code
선택 영역 스타일: bold, italic, underline, strikethrough
저는 추가적으로 text-align이 필요했기 때문에 커스텀 블록 스타일로 left, center, right를 추가했습니다. 필요에 따라서 첨부 파일, 링크, 주석, 테이블 스타일을 추가할 수 있습니다. 문서화가 잘 되어있기 때문에 손쉽게 추가할 수 있습니다.
작성한 내용을 추출하거나(HTML 혹은 Markdown), 추출된 내용을 다시 에디터로 불러오는 부분은 외부 패키지를 이용하면 됩니다. 저는 draftjs-to-html과 html-to-draftjs를 이용해서 추출한 내용을 DB에 저장하고, 불러왔습니다.
소스코드
개발 스택은 React, TypeScript입니다.