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

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

기능 많고 무거운 에디터

유료 에디터

테스트 안해본

개발 종료