[CKEditor5] 🚀 CKEditor 5 가이드 , 설치부터 커스터마이징까지

✅ 웹 애플리케이션에서 텍스트 편집기는 필수적인 요소

✅ CKEditor 5는 강력한 기능과 확장성을 제공하는 대표적인 WYSIWYG 에디터

→ WYSIWYG = WHAT YOU SEE IS WHAT YOU GET

 

1️⃣ CKEditor 5

• HTML 기반의 WYSIWYG(What You See Is What You Get) 에디터

• 다양한 플러그인을 통해 맞춤 설정이 가능

✔️ 모던 UI & 리치 텍스트 편집

✔️ React, Vue, Angular와 호환

✔️ 이미지 업로드, 테이블 삽입, 마크다운 변환 지원

✔️ 커스터마이징 가능한 플러그인 시스템

 

2️⃣ CKEditor 5 설치

• CDN으로 빠르게 적용하기

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

✔️ CDN으로 적용시

→ 장점 : 간단한 테스트 용도로 적합
→ 단점 : 플러그인, 커스터마이징 어려움

 

3️⃣ CKEditor 5 주요 기능 & 설정

📌 툴바(Toolbar) 설정

ClassicEditor.create(document.querySelector('#editor'), {
    toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote']
});

 

✔️ 불필요한 기능 제거 가능
✔️ 맞춤형 툴바 배치 가능

 

📌 이미지 업로드 기능 추가

import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';

ClassicEditor.create(document.querySelector('#editor'), {
    plugins: [Image, ImageToolbar],
    toolbar: ['imageUpload']
});

✔️ Drag & Drop으로 이미지 삽입 가능
✔️ Base64, 서버 업로드 방식 지원

 

📌 자동 저장(AutoSave) 기능 추가

import AutoSave from '@ckeditor/ckeditor5-autosave/src/autosave';

ClassicEditor.create(document.querySelector('#editor'), {
    plugins: [AutoSave],
    autosave: {
        save(editor) {
            return fetch('/save', {
                method: 'POST',
                body: JSON.stringify({ content: editor.getData() })
            });
        }
    }
});

✔️ 사용자 입력을 실시간으로 저장 가능
✔️ 작업 중 실수로 닫아도 데이터 보존 가능

 

4️⃣ CKEditor 5 커스터마이징

📌 테마 변경 → 다크 모드

.ck-editor__editable {
    background-color: #333;
    color: white;
}

 

5️⃣ CKEDitor 5 활용 팁

✔️ Markdown 지원 → HTML 변환 없이 깔끔한 문서 작성 가능
✔️ 커스텀 플러그인 제작 → 기업 맞춤형 기능 추가 가능
✔️ 실시간 협업 기능 → 여러 사용자가 동시에 편집 가능