[CKEditor5] Demo 사용법

🔧 API_

[CKEditor5] Demo 사용법

Joyfullyever 2025. 3. 11. 17:03

추후 프로젝트에 사용할 예정이기에 더 공부해야함...!

1. CKEditor 5 Demo 페이지 접속

: 하단 Source Code 에서 코드 가져오기

2. Demo 페이지의 *개발자 도구*에서 HTML 및 JS 소스를 확인하고, 아래와 같이 구성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CKEditor 5 Demo</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/41.3.1/classic/ckeditor.js"></script>
</head>
<body>
    <h2>CKEditor 5 Demo</h2>
    <textarea id="editor"></textarea>

    <script>
        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(editor => {
                console.log('CKEditor5 로드 완료!', editor);
            })
            .catch(error => {
                console.error('에러 발생:', error);
            });
    </script>
</body>
</html>

3. 코드 실행 방법

위 HTML 파일을 저장하고 브라우저에서 실행하면 CKEditor 5 Demo 버전이 로드됨

✅ 특징

• 별도 설치 없이 CDN을 이용해 바로 사용 가능

• 기본적인 툴바 기능 제공 (BOD, ITALIC, LINK, UNDO, REDO 등)

• 개발자 도구에서 콘솔로 editor.getData()를 실행하면 입력된 데이터 확인 가능

4. 추가 기능 확장

커스텀 툴바 옵션 설정 가능

ClassicEditor
    .create(document.querySelector('#editor'), {
        toolbar: ['heading', '|', 'bold', 'italic', 'link', '|', 'undo', 'redo']
    })
    .then(editor => {
        console.log('에디터 초기화 완료');
    })
    .catch(error => console.error('에러:', error));

5. 마무리

✅ CDN을 활용해 간편하게 테스트할 수 있는 방식

✅ 간단한 HTML 파일만으로 실행 가능, 개발자 도구에서 소스를 참고해 확장 가능