CKEditor 5 무료 버전 통합 기능 테스트 페이지

이 페이지는 CKEditor 5의 무료 오픈소스 옵션으로 제공되는 다양한 기능과 서식을 검증하기 위한 샘플 콘텐츠입니다. 에디터 내부에서 각 요소가 올바르게 표현되는지 확인하세요.

1. 텍스트 서식 및 스타일 (Basic Styles)

기본적인 글자 모양과 정렬, 그리고 특수 서식 기능입니다.

이 문장은 굵게(Bold) 처리되었으며, 이 문장은 기울임(Italic)이 적용되었습니다.

필요에 따라 밑줄(Underline)을 긋거나 취소선(Strikethrough)을 사용할 수 있고, Ctrl + C와 같은 키보드 단축키나 강조 표시(Highlight)도 표현 가능합니다.

화학식 표현을 위한 하첨자(H₂O) 및 수학적 표현을 위한 상첨자(X² + Y²)도 완벽하게 지원합니다.

이 단락은 중앙 정렬된 상태입니다.

이 단락은 우측 정렬된 상태입니다.

2. 다양한 블록 요소 및 인용 (Block Elements)

일반적인 본문 외에 긴 인용구나 서식이 지정된 텍스트 블록을 테스트합니다.

“디자인은 단순히 어떻게 보이고 느껴지느냐가 아닙니다. 디자인은 어떻게 기능하느냐입니다.”

코드 블록 및 인라인 코드

개발자들을 위한 소스코드 삽입 기능입니다. 인라인 코드는 const editor = true; 형태로 표현됩니다.

// CKEditor 5 기본 초기화 예시
ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log( '에디터 초기화 성공!', editor );
    } )
    .catch( error => {
        console.error( error );
    } );

3. 리스트 스타일 (Lists)

순서가 있는 리스트와 없는 리스트, 그리고 체크리스트 형태를 테스트합니다.

순서 없는 목록

• 첫 번째 주메뉴 아이템입니다.
• 두 번째 주메뉴 아이템입니다.
  • 하위 목록 스타일도 정상적으로 출력되는지 확인합니다.
  • 들여쓰기가 적용된 깊은 수준의 아이템입니다.
• 세 번째 주메뉴 아이템입니다.

순서 있는 목록

1. 시스템 요구사항 확인
2. 종속성 패키지 설치
3. 환경 설정 및 에디터 빌드

할 일 목록 (Todo List)

• CKEditor 5 핵심 플러그인 분석 완료
• 커스텀 툴바 레이아웃 구성하기

4. 고도화된 표 기능 (Advanced Tables)

무료 버전에서도 강력하게 제공되는 표 스타일링과 셀 병합, 배경색 지정 기능입니다.

5. 미디어 및 링크 연동 (Media & Links)

외부 리소스 참조 및 미디어 임베드 기능 검증입니다.

외부 하이퍼링크

자세한 공식 문서는 CKEditor 5 공식 도큐먼트 사이트에서 직접 확인할 수 있습니다. (새 창 열기 및 보안 속성 포함)

이미지 배치 및 캡션

오른쪽에 배치된 이미지와 본문 텍스트가 자연스럽게 어우러지는지 레이아웃을 검증합니다. 무료 버전 빌드에 Image Resize 및 Image Caption 플러그인이 로드되어 있다면 마우스 드래그로 크기를 조절하거나 하단 캡션을 편집할 수 있습니다.

미디어 임베드 (Media Embed)

유튜브나 비메오 등의 미디어 주소를 입력했을 때 iframe 형태로 자동 변환되는 기능입니다.

6. 기타 편의 기능 (Miscellaneous)

텍스트 내부에서 특정 단어에 특수 기호를 매핑하거나 단락을 깔끔하게 구분하는 요소입니다.

자동 변환 기능이 켜져 있다면 (c) 기호는 ©로, -> 화살표는 → 모양으로 자동 치환됩니다.

아래 투명 축소선(Horizontal Line)을 마지막으로 모든 무료 옵션 기능 테스트를 마칩니다.

-- 샘플 콘텐츠 끝 --