# 에디터 (리치 텍스트 · TinyMCE · CKEditor 5)

| 항목 | 경로 |
|------|------|
| 데모 | `editor.html` |
| CSS | `css/editor.css` (+ `form.css` 권장) |
| JS | `js/editor-a11y.js` |
| CDN (TinyMCE) | `tinymce@7` · `license_key: 'gpl'` |
| CDN (CKEditor 5) | super-build `41.4.2` · `super-build/ckeditor.js` + `translations/ko.js` |

서식이 필요 없으면 **네이티브 textarea** (`form.html`)를 쓰세요.

---

## 비교

| 제품 | 비고 |
|------|------|
| **TinyMCE** | textarea 동기화·한국어·도움말. 공공·기업에서 흔함 |
| **CKEditor 5 Classic** | a11y 문서 우수. **super-build**로 데모(입력·글꼴·글자 크기) |
| Toast UI / Summernote | 국내 사용 多, a11y 상대적으로 약함 |

### CKEditor 라이선스 주의

CKEditor 5 **v44 UMD** + `licenseKey: 'GPL'` 조합은 에디터가 **읽기 전용(`isReadOnly`)** 으로 잠겨 입력이 안 되는 경우가 있습니다.  
이 킷은 입력이 되는 **super-build(41.4.2)** 를 사용합니다. Classic 프리셋에는 글꼴·글자 크기 플러그인이 없습니다. 최신 UMD를 쓰려면 [CKEditor 계정](https://portal.ckeditor.com/)에서 발급받은 라이선스 키가 필요합니다.

---

## 복사 패키지

### TinyMCE
```
CDN: tinymce@7
마크업: data-editor="tinymce"
초기화: a11yEditor.initAll()
```

### CKEditor 5
```
CDN: https://cdn.ckeditor.com/ckeditor5/41.4.2/super-build/ckeditor.js
CDN: https://cdn.ckeditor.com/ckeditor5/41.4.2/super-build/translations/ko.js
마크업: data-editor="ckeditor5" + [data-ck-mount] + textarea
초기화: a11yEditor.initAllCkeditor5()
```

---

## 마크업 (CKEditor)

```html
<div class="editor-wrap" data-editor="ckeditor5">
  <button type="button" data-editor-plain aria-controls="ckContent">HTML 코드로 작성</button>
  <label for="ckContent" class="form-label">게시글 내용</label>
  <div class="form-field editor-field">
    <div id="ckContent-mount" class="ck-editor-mount" data-ck-mount></div>
    <textarea id="ckContent" name="ckContent" class="form-textarea"
      hidden tabindex="-1"></textarea>
  </div>
</div>
```

- 편집 UI는 `[data-ck-mount]`에 붙음
- `textarea`는 폼 전송·HTML 코드 전환용 (에디터 활성 시 숨김)

---

## 글꼴 · 글자 크기

툴바에서 **글꼴**과 **글자 크기**를 고를 수 있습니다.

- 글꼴: 기본(프리텐다드) · 맑은 고딕 · 돋움 · 굴림 · 바탕 · Arial
- 크기: 12 · 14 · 16(기본) · 18 · 20 · 24 · 36px (12px 미만은 제공하지 않음)
- 글자 색은 넣지 않습니다. 색만으로 정보를 구분하지 마세요.

CKEditor는 Classic 프리셋에 글꼴 플러그인이 없어 **super-build** CDN을 씁니다.

---

툴바 **이미지 업로드**, 끌어다 놓기, 붙여넣기가 동작합니다.

| 환경 | 동작 |
|------|------|
| 데모 (업로드 URL 없음) | 업로드 불가. **서버에 설치하고 업로드 폴더를 준비하라**는 경고 |
| 실서비스 | `window.cmsEditorUpload = { url: '/upload', csrf: '…' }` |

서버 응답 JSON 예:

```json
{ "location": "https://example.go.kr/upload/a.png" }
```

`url` 또는 `urls.default` 도 인식합니다. TinyMCE와 같은 `cmsEditorUpload`를 씁니다.

- 형식: JPEG · PNG · GIF · WebP
- 용량: 5MB 이하
- 삽입 후 이미지를 선택하고 **대체 텍스트**(`imageTextAlternative`)를 반드시 입력하세요. 장식 이미지가 아니면 빈 alt는 접근성 위반입니다.

```js
window.cmsEditorUpload = {
  url: '/api/editor/image',
  csrf: document.querySelector('meta[name="csrf-token"]').content
};
```

---

## 초기화

```html
<script src="https://cdn.jsdelivr.net/npm/tinymce@7/tinymce.min.js"></script>
<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>
<script src="./js/editor-a11y.js"></script>
<script>
  a11yEditor.initAll();
  a11yEditor.initAllCkeditor5();
</script>
```

---

## 접근성 체크

- [ ] `label for` / `textarea id`
- [ ] HTML 코드 전환
- [ ] Tab으로 도구모음에 진입, 화살표로 버튼 이동
- [ ] CKEditor가 읽기 전용이면 super-build CDN(41.x)인지 확인
- [ ] 이미지 삽입 후 대체 텍스트 입력
- [ ] JS 미로드 시 textarea로 입력·전송 가능