- 홈
- 에디터
에디터 (리치 텍스트)
어떤 에디터를 쓰나?
| 제품 | 특징 | 이 킷 |
|---|---|---|
| TinyMCE | textarea 연동·폼 전송이 쉽고, 툴바·단축키·한국어 UI·접근성 옵션이 성숙함. 공공·기업에서 가장 흔함. | 데모 |
| CKEditor 5 | 접근성 문서가 잘 되어 있음. super-build CDN으로 데모(입력·글꼴·이미지). 최신 UMD는 라이선스 키 없으면 읽기 전용일 수 있음. | 데모 |
| Toast UI / Summernote | 국내 사용 많음. 키보드·ARIA는 TinyMCE/CK보다 약한 편. | 비권장(a11y) |
| 네이티브 textarea | 서식 불필요하면 가장 접근성·안정성이 좋음. | 우선 검토 |
* 서식이 꼭 필요 없으면 form.html textarea만 쓰는 것이 접근성에 유리합니다.
* 리치 에디터는 툴바·편집영역 때문에 학습 비용이 큽니다. HTML 코드 전환을 제공하세요.
예시 — TinyMCE + HTML 코드 전환
* data-editor="tinymce" (또는 data-editor) · a11yEditor.initAll()
* data-editor-plain: 에디터를 끄고 HTML 소스를 textarea에서 직접 수정 (값 유지)
* 툴바: 글꼴 · 글자 크기(12px 이상) · 이미지 업로드는 서버 URL 필요
예시 — CKEditor 5 + HTML 코드 전환
* data-editor="ckeditor5" · a11yEditor.initAllCkeditor5()
* CDN: super-build/ckeditor.js + super-build/translations/ko.js (v41.4.2 · 글꼴·글자 크기 포함)
* 마운트: [data-ck-mount] · 전송용 textarea에 HTML 동기화
* 툴바: 글꼴(프리텐다드·맑은 고딕·돋움·굴림·바탕·Arial) · 글자 크기 12~36px. 색상만으로 구분하지 마세요.
* 이미지는 서버 업로드가 필요합니다. 이 폴더를 웹 서버에 설치하고 업로드 폴더를 준비한 뒤 window.cmsEditorUpload = { url: '/upload', csrf: '…' } 를 설정하세요. 서버가 없으면 등록할 수 없습니다.
* JPEG·PNG·GIF·WebP · 5MB 이하
* 참고: v44 UMD + licenseKey:'GPL'은 읽기 전용으로 잠기는 경우가 있어 41.x super-build를 사용합니다.
키보드 · 접근성 체크
| 키 | 동작 |
|---|---|
| Tab / Shift+Tab | 도구모음 → 편집 영역 순차 이동 |
| ← → | 도구모음 안에서 버튼 이동 |
| Alt + F10 | 편집 영역에서 도구모음으로 (에디터 기본 단축키) |
| Alt + 0 | CKEditor 5: 접근성 도움말 (AccessibilityHelp) |
| Esc | 메뉴·다이얼로그 닫기 |
- placeholder만으로 라벨 대체 금지
- 링크는 새 창만 쓰지 말고, 가능하면 본문에 새 창 안내 문구 포함
- 이미지·색만으로 정보 전달하지 않기 (대체 텍스트·목록·제목 구조)
- 인증·장애 유형에 따라 에디터 자체가 감점 요인이 될 수 있음 → HTML 코드 전환 권장
초기화 코드
/* TinyMCE */ <script src="https://cdn.jsdelivr.net/npm/tinymce@7/tinymce.min.js"></script> a11yEditor.initAll(); /* CKEditor 5 */ <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/super-build/ckeditor.js"></script> <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/super-build/translations/ko.js"></script> a11yEditor.initAllCkeditor5();
상세: docs/editor.md