Rich Text Editor

위지윅(WYSIWYG; What You See Is What You Get) 에디터(엄밀하게 말하면 잘못된 표현)라고도 불려지는 웹 브라우저에서 글에 서식을 지정할 수 있는 애플리케이션을 말한다.

기술적으로는 아이프레임과 내용 수정 모드(designMode)를 사용하거나 HTML 요소의 contenteditable 속성을 사용해서 편집 기능을 넣은 것이다. 브라우저별로 편집을 했을 때 생성되는 HTML 코드가 상이하고 같은 API라도 동작이 다른 경우가 많아서 개발이 쉽지 않다.

에디터 종류가 무척이나 많고 다양해서 고르기가 쉽지 않은데 Javascript WYSIWYG editors와 검색해본 것 중에 테스트 해본 것을 위주로 특징을 기록해 봤다. 텍스트와 이미지에 링크 걸고 볼드나 목록 태그 정도 쓸 수 있는 가벼운 에디터를 위주로 찾아봤다.

Quill

130 + 38 KB, BSD License, 모든 모던 브라우저를 지원하는데 버전은 아직 0.20.1이다. 엔터를 입력하면 p 요소가 아닌 div요소를 삽입한다. 에디터 영역과 툴바 HTML을 따로 만들어서 넘겨줘야 한다. 데모에서는 잘 되는데 적용해 보니 엔터치면 다음줄로 커서가 이동하지 않거나 툴바를 누를 때 포커스를 잃어버리는 현상이 나타났다.

widgEditor

THE MAN IN BLUE가 만든 textarea를 변환시키는 방식의 간단한 에디터이다. 블로그 글은 2013년을 마지막으로 업데이트 된 내용이 없고 에디터는 2008년을 마지막으로 개발이 종료된 듯 하다. 33.45KB

이미지에 링크거는 기능을 제공하지 않는 에디터

WYSIHTML5: 오픈 소스, 가볍고, HTML5 구문을 사용하고, 인라인 스타일 대신 클래스를 사용하는 등 기능도 아주 혁신적이고 브라우저 지원도 아주 뛰어난 새로운 에디터이다. 이미지를 선택하면 링크 버튼이 작동하지 않는다.
Summernote: 80 KB, 이미지를 선택하고 링크 걸면 이미지 옆에 URL이 텍스트로 삽입된다.

기능 많고 무거운 에디터

CKeditor: GPL, LGPL, MPL 등의 오픈소스 라이센스를 따르고 있다. 높은 접근성을 갖추고 있다. Basic, Standard, Full 세가지 버전으로 나눠져 있는데 Basic 만 해도 383KB(114KB gzip)인 것이 가벼운 에디터는 아니다.
TinyMCE: Moxiecode Systems AB에서 제작하였고 LGPL 라이센스를 사용하고 있다. 텍스트 영역을 에디터로 변경하는 방식을 사용하고 있다. XHTML 표준 코드를 출력하고 주요 브라우저들을 모두 지원하고 있다. 키보드로 모든 기능이 이용 가능하게 제작되어 있는 등 접근성이 상당히 높다. 590KB(195KB gzip)으로 초기 구동이 느리다.
WYMeditor: 왜 경량 에디터로 분류되어 있는지 모르겠는데 용량이 무려 1356KB(347KB gzip)나 된다.

유료 에디터

Redactor: $145~
Froala: $99~