WYSIWYG Editor

younghyun·2022년 11월 19일

WYSIWYG Editor

WYSIWYG는 What You See Is What You Get, "보는 대로 얻는다"라는 문장의 줄임말입니다. 문서를 편집하는 과정에서 화면에 보이는 문장이나 글 맵시 등을 동일하게 화면에 출력해주는 방식입니다. 위지위그 에디터는 이러한 기능을 위해서 사용자는 모르게 <p>, <span>, <em style=> 등 다양한 HTML 소스를 입력해주고 있습니다.

프로젝트를 하다보면 단순 input이나 textarea로는 부족한 경우가 많습니다. 예를 들면 블로그 글을 작성할 때나 쇼핑몰에 제품 설명을 적어야 하는 경우를 떠올리면 이해가 빠를 것입니다. 잘 구현을 한다면 충분할 수도 있지만 WYSIWYG 방식이 아니라면 사용자 입장에서 내가 쓴 글이 어떻게 출력이 되는지 확인 후에 다시 수정을 하는 번거로운 과정이 추가됩니다.

Premium Editor

Adobe Dreamweaver CC
코드 에디터
CSS, PHP, XHTML, JSP, JavaScript, XML
개발자가 다양한 화면 호환성 문제를 해결할 수 있는 창들이 제공 됨
웹사이트 자체를 쉽게 만들 수 있도록 도와주는 것 같음

Froala
(풍부한)서식있는 텍스트 기능과 빠른 확장 기능이 내장 된 Javascript로 작성된 경략 WYSIWYG
깔끔한 디자인, 설치가 쉬움
실시간 협업 편집 가능

Setka Editor
코드없이 웹을 만들 수 있는 에디터 인 것 같다.

CoffeeCup HTML Editor
이것도 웹사이트를 쉽게 만들 수 있게 도와주는 에디터인 것 같다.

Free Editor

TOAST UI Editor

문서 편집을 위한 자바스크립트 라이브러리로, 마크다운(Markdown)과 위지윅(WYSIWYG) 2가지 모드의 에디터를 제공하여 사용자가 편의에 따라 자유롭게 에디터를 선택할 수 있도록 도와줍니다.

CKEditor

15년 동안 시장에서 CKEditor는 광범위한 기능과 레거시 소프트웨어 호환성을 갖춘 가장 평판이 좋은 편집자 중 하나로서 이 목록에 자리를 잡았습니다.

장점

설정 용이성
빠른 로딩(개발 시간 절약)과 수동으로 편집하여 서버에 업로드하지 않고도 프로젝트를 즉시 수정 기능.
이미지 업로드 시 Base64 Mode 지원.
Classic, Inline, Balloon 형태의 다양한 버전의 툴바 형식을 제공하고 기본적인 에디터 기능 뿐만 아니라 추가할 수 있는 플러그인 기능이 꽤나 다양한 편.
구현 가능한 기능이 많음.
사용방법과 기능에 대한 문서도 자세히 정리되어있음. 많은 사람이 이용함.

단점

한글 입력 문제
한글 텍스트 입력 후 일정 공백을 입력하고 다시 한글을 입력하면 입력하지 않은 ㅇ이 하나 더 입력됩니다.

텍스트에 링크 연결을 하고나서 링크가 연결된 텍스트 맨 마지막 경계선 부분으로 이동 후 다시 한글을 입력하면 ㅎ하한ㄱ그글 ???????
이렇게 입력한 한글내용이 중복되며 입력됩니다.

CKEditor 5 Documentation

Editor.js

Editor.js는 오픈 소스 편집기입니다. 이동하고 재정렬할 수 있는 콘텐츠 블록을 편집할 수 있습니다.

블록을 클릭하면 해당 특정 블록에 사용할 수 있는 특정 옵션이 표시됩니다. 마찬가지로 텍스트 내용을 클릭하면 텍스트 서식 및 인라인 스타일에 대한 옵션이 나타납니다.

Editor.js는 API(응용 프로그래밍 인터페이스) 덕분에 확장 및 연결 가능하도록 설계되었습니다. 또한 JSON 출력 형식으로 깨끗한 데이터를 반환합니다.

TinyMCE

TinyMCE는 Evernote, Atlassian 및 Medium을 포함한 많은 제품의 뒤에 있는 서식 있는 텍스트 편집기입니다.

개발자에 따르면 TinyMCE의 목표는 다른 개발자가 아름다운 웹 콘텐츠 솔루션을 구축할 수 있도록 돕는 것입니다.

통합하기 쉽고 클라우드 기반, 자체 호스팅 또는 하이브리드 환경에 배포할 수 있습니다. 설정을 통해 Angular, React 및 Vue와 같은 프레임워크를 통합할 수 있습니다.

TinyMCE는 표 생성 및 편집, 글꼴 패밀리 설정, 글꼴 검색 및 교체, 글꼴 크기 변경 등의 기능을 사용하여 디자인을 완벽하게 제어할 수 있습니다.

Quill

Quill은 확장 및 사용자 정의를 염두에 두고 구축된 무료 오픈 소스 WYSIWYG 편집기입니다.

모듈식 아키텍처와 표현형 API 덕분에 Quill 코어로 시작한 다음 모듈을 사용자 정의하거나 필요에 따라 이 서식 있는 텍스트 편집기에 고유한 확장을 추가할 수 있습니다.

Quill은 모든 사용자 정의 콘텐츠 및 형식을 지원하므로 포함된 슬라이드 데크, 대화형 체크리스트, 3D 모델 등을 추가할 수 있습니다.

이 편집기는 완전히 사용자 정의할 수 있고 더 풍부하고 대화형 콘텐츠를 지원할 수 있기 때문에 개인이 소규모 프로젝트와 Fortune 500대 기업 모두에서 사용합니다.

부가 기능은 많지 않지만 기본기능이 문제 없이 모두 잘 동작합니다.

UI는 깔끔하긴 하나 다소 투박합니다.

Summernote
Summernote는 Bootstrap 또는 jQuery로 로드할 수 있는 간단한 WYSIWYG 편집기입니다.

플러그인을 사용하여 이 편집기를 사용자 정의하고 확장할 수 있습니다.

ContentTools

ContentTools는 몇 단계만 거치면 모든 HTML 페이지에 추가할 수 있는 오픈소스 WYSIWYG 편집기입니다.

추가되면 HTML 페이지에 연필 아이콘이 표시됩니다. 클릭하면 도구 상자와 속성 표시줄이 나타납니다.

이 두 요소를 사용하여 페이지 내에서 텍스트 이미지, 포함된 비디오, 표 및 기타 콘텐츠를 편집, 크기 조정 또는 드래그 앤 드롭할 수 있습니다.

Etc
Draft.js
Trix
Trumbowyg
AlloyEditor
MediumEditor
Redactor

Editor 선정 조건

UI 커스터마이징에서 자유로워야할 것. 아무리 이쁜 디자인, 좋은 기능의 에디터여도 만들 사이트에 녹아들지 않는다면 사용할 수 없습니다.
무료 버전으로 충분히 기능 구현이 가능할 것. 여러가지 기능 제공(라이브러리). 개발을 하다보면 기능이 추가되거나 줄어듭니다. 그렇기 때문에 무료 버전이 지원하는 기능이 너무 타이트하다면 원치 않는 지출이 늘어나거나 최악의 경우 다른 에디터로 변경해야하는 일이 생길 수 있습니다. 그렇기 때문에 무료 버전으로도 충분한 기능 구현이 되는지가 중요했습니다.
지속적인 인지도. 인지도가 있다는 것에는 많은 의미가 포함되어 있습니다. 사람들이 많이 사용을 했고 그에 대한 참조 문서가 많았으면 했습니다. Docs에도 충분한 설명이 있지만 가끔은 필요한 기능을 구현하기 위해서 Docs에 없는 방식으로 구현을 해야할 때도 있었습니다. 그리고 지속적으로 많은 사람들이 사용하고 있다는 것은 많은 사람들이 많은 실험 혹은 개발 경험을 거쳤을 것이라는 의미라고 생각되었습니다.
한국어 지원이 되는가
React지원
지속적인 유지보수