웹사이트·게시판의 입력 영역에 넣어 쓰는 WYSIWYG, 마크다운, 블록형·헤드리스 에디터를 모았습니다. 코드 에디터와 설치형 문서 프로그램은 범위에 넣지 않았습니다.
← 모음
웹 글쓰기 에디터 모음: 스마트에디터 2, CKEditor, TinyMCE, Summernote
그누보드·영카트에서 쓰는 스마트에디터 2를 비롯해 CKEditor, TinyMCE, Summernote, Quill, Toast UI Editor 등 웹사이트에 넣는 글쓰기 에디터를 모았다.
소스
- SmartEditor 2SmartEditor 2는 네이버가 공개한 웹 기반 WYSIWYG 에디터로 그누보드 5와 영카트 5의 에디터 플러그인으로 쓰인다.
그누보드 5그누보드 5는 PHP와 MySQL 기반의 오픈소스 게시판 및 웹 솔루션이다. 영카트 쇼핑몰 기능을 포함한다.- CKEditorCKEditor는 웹페이지에 넣는 WYSIWYG 리치 텍스트 에디터로 플러그인 구조로 기능을 확장한다.
TinyMCETinyMCE(타이니MCE)는 별도의 설치 없이 웹 브라우저에서 MS 워드 수준의 편집 환경을 구현해 주는 글로벌 1위 리치 텍스트 에디터(WYSIWYG)입니다. 전 세계 150만 명 이상의 개발자가 신뢰하는 이 플랫폼은 AI 글쓰기 보조, 실시간 협업, 완벽한 서식 유지 기능을 제공하여 비즈니스용 콘텐츠 제작 환경을 획기적으로 개선해 줍니다.SummernoteSummernote는 웹 페이지에 넣는 WYSIWYG 글쓰기 에디터이다.
- QuillQuill은 모듈 구조로 확장하는 오픈소스 리치 텍스트 에디터이다.
- Froala EditorFroala Editor는 상용 라이선스로 제공되는 WYSIWYG HTML 에디터이다.
- TOAST UI EditorTOAST UI Editor는 NHN이 만든 마크다운과 WYSIWYG 모드를 함께 제공하는 오픈소스 에디터이다.
- EasyMDEEasyMDE는 웹페이지의 입력 영역을 마크다운 에디터로 바꿔 주는 자바스크립트 라이브러리이다.
- Editor.jsEditor.js는 콘텐츠를 블록 단위로 편집하고 JSON으로 출력하는 블록 스타일 에디터이다.
웹 글쓰기 에디터란
웹 글쓰기 에디터는 웹페이지의 입력 영역에서 글꼴, 정렬, 이미지 삽입 같은 서식을 적용하며 글을 작성할 수 있게 해주는 편집 컴포넌트입니다. 게시판·쇼핑몰·관리자 화면에 넣어 쓰는 WYSIWYG, 마크다운, 블록형, 헤드리스 유형이 있습니다.
| 유형 | 설명 | 대표 에디터 |
|---|---|---|
| WYSIWYG | 서식을 화면에서 바로 확인하며 편집, HTML 출력 | SmartEditor 2, CKEditor, TinyMCE, Summernote, Quill, Froala |
| 마크다운 | 마크다운 문법으로 작성, 미리보기 제공 | EasyMDE, TOAST UI Editor |
| 블록형 | 문단·이미지·목록을 블록 단위로 편집, JSON 출력 | Editor.js |
| 헤드리스 | 편집 기능만 제공하고 화면은 직접 구성 | Tiptap, Lexical |
그누보드·영카트의 스마트에디터 2
그누보드 5와 영카트 5의 에디터 플러그인 중 하나로 SmartEditor Basic 2.0(스마트 에디터 2)이 쓰입니다. 글쓰기 기본 글꼴은 돋움 9pt로 맞춰져 있습니다. 영카트는 그누보드 기반 쇼핑몰이라 별도 소스로 두지 않고 그누보드 5 설명에 포함합니다.
| 항목 | 내용 |
|---|---|
| 적용 환경 | 그누보드 5, 영카트 5 에디터 플러그인 |
| 플러그인명 | 스마트 에디터 2, SmartEditor Basic 2.0 |
| 기본 글꼴 | 돋움 9pt |
스마트에디터 2 기본 글꼴 변경
아래 순서로 코드를 넣으면 글쓰기 기본 글꼴이 맑은 고딕 10pt로 바뀝니다. 줄 번호는 배포·버전에 따라 달라질 수 있으니, 같은 파일에서 에디터 초기화 구문 근처를 확인한 뒤 삽입합니다.
- /plugin/editor/smarteditor2/config.js 파일을 연다
- 에디터 초기화 구문 다음(글 기준 24번째 줄 다음)에 코드를 삽입한다
- 글쓰기 화면에서 기본 글꼴이 맑은 고딕 10pt로 변경되는지 확인한다
if (oEditors.getById["wr_content"])
oEditors.getById["wr_content"].setDefaultFont( "맑은 고딕", 10 );
WYSIWYG 에디터
화면에서 서식을 바로 보며 HTML로 저장하는 유형입니다. Summernote는 jQuery 플러그인 모음과도 공유합니다.
| 에디터 | 유형 | 특징 |
|---|---|---|
| CKEditor | WYSIWYG | 플러그인 구조로 기능 확장 |
| TinyMCE | WYSIWYG | 도구 모음과 플러그인으로 구성 |
| Summernote | WYSIWYG | 웹 페이지에 넣는 글쓰기 에디터 |
| Quill | WYSIWYG | 모듈 구조의 오픈소스 에디터 |
| Froala Editor | WYSIWYG | 상용 라이선스 제공 |
마크다운·블록형·헤드리스 에디터
마크다운 미리보기, 블록 단위 JSON 출력, UI를 직접 붙이는 헤드리스 프레임워크까지 포함했습니다.
| 에디터 | 유형 | 특징 |
|---|---|---|
| TOAST UI Editor | 마크다운·WYSIWYG | 두 모드를 함께 제공 |
| EasyMDE | 마크다운 | 입력 영역을 마크다운 에디터로 변환 |
| Editor.js | 블록형 | 블록 단위 편집, JSON 출력 |
| Tiptap | 헤드리스 | ProseMirror 기반 |
| Lexical | 헤드리스 | 메타가 만든 확장 가능한 프레임워크 |
에디터별 기본 글꼴 설정 방식
기본 글꼴을 바꾸는 위치는 에디터마다 다릅니다. SmartEditor 2는 글에서 확인한 setDefaultFont 호출이고, 나머지는 공식 문서의 초기화 옵션을 기준으로 합니다.
| 에디터 | 설정 방식 | 비고 |
|---|---|---|
| SmartEditor 2 | setDefaultFont 함수 호출 | config.js에 삽입하는 방식 |
| TinyMCE | 초기화 옵션(content_style, font_family_formats) | 공식 문서 확인 |
| CKEditor | 초기화 옵션(fontFamily) | 공식 문서 확인 |
| Summernote | 초기화 옵션(fontNames) | 공식 문서 확인 |
| 그 외 에디터 | 에디터 본문 CSS 또는 초기화 옵션 | 공식 문서 확인 |
에디터 선택 기준
게시판·쇼핑몰·프레임워크 앱에 넣을 때 아래 항목을 같이 보면 됩니다. CMS 본체 선택은 홈페이지 제작 CMS 모음을 참고합니다.
| 기준 | 확인 항목 |
|---|---|
| 적용 환경 | CMS 플러그인 연동, 자바스크립트 프레임워크 지원, jQuery 의존 여부 |
| 출력 형식 | HTML, 마크다운, JSON |
| 이미지·파일 | 이미지 업로드 방식, 서버 연동 |
| 한글 입력 | 한글 입력(IME) 동작, 한글 폰트 지정 |
| 라이선스 | 오픈소스 / 상용, 상업 사용 조건 |
| 유지 상태 | 최신 릴리스 시점, 저장소 활동 |
등록조회0