CKEditor란?

CKEditor Logo

 

CKEditor는 웹 애플리케이션 개발을 할 때 게시판 CRUD 개발의 내용을 입력 할 때 에디터로 활용할 수 있다. 티스토리 블로그에서 사용하고 있는 에디터, 네이버 스마트 에디터 등등 다양한 플랫폼에서 제공하는 에디터처럼 CKEditor도 내가 원하는 텍스트를 입력하고 크기를 키우고 색상도 설정할 수 있고 강조, 정렬, 표, 이모티콘, 링크, 이미지 추가 등등과 같은 기능을 사용할 수 있다. 다양한 에디터처럼 많은 기능을 제공하고 있고 무료 OPEN SOURCE로 배포하고 있는 CKEditor에 대해서 알아보자.

 

 

 

 

 

CKEditor란?

 

CKEditor는 웹 기반의 WYSIWYG(What You See Is What You Get) 텍스트 편집기로, 사용자가 HTML 문서를 쉽게 작성하고 편집할 수 있도록 도와주는 오픈 소스 라이브러리입니다.
기본적으로 웹 브라우저에서 워드 프로세서와 유사한 환경을 제공하며, HTML을 직접 작성하지 않아도 다양한 텍스트 스타일링, 이미지 삽입, 테이블 생성 등을 할 수 있습니다.

 

 

 

 

 

 

CKEditor의 역사 및 발전

 

2003년 'FCKeditor'라는 이름으로 처음 개발되었습니다.
2009년 CKEditor3가 출시되면서 성능 및 기능이 크게 향상되었습니다.
2012년 CKEditor4가 공개되었으며, 플러그인 방식으로 확장성이 높아졌습니다.
2018년 CKEditor5가 출시되며, 모듈화 구조와 현대적인 UI/UX가 도입됩니다.

 

현재 최신 버전은 CKEditor5 이며, 다양한 모드를 지원하고 클라우드 서비스와 연동할 수도 있습니다.

 

 

 

 

 

CKEditor의 주요 특징

 

1. WYSIWYG (What You See Is What You Get) 지원

사용자가 보는 화면이 실제 결과물과 동일하게 표시되므로, HTML을 직접 작성할 필요 없이 직관적으로 편집할 수 있습니다. 마치 MS Word 또는 Google Docs처럼 문서를 작성할 수 있는 환경을 제공합니다.

 

 

2. 다양한 에디터 모드 지원

CKEditor는 다양한 사용 환경에 맞게 여러 가지 에디터 모드를 제공합니다.

• Classic Editor : 기본적인 툴바가 있는 전통적인 문서 편집기 형태
• Inline Editor : 페이지 내에서 특정 부분만 직접 수정할 수 있도록 하는 형태
• Balloon Editor : 선택한 텍스트 위에 툴바가 나타나는 형태
• Decoupled Editor : 툴바를 자유롭게 배치할 수 있는 형태

 

 

3. 플러그인 기반의 확장성

CKEditor는 기본적으로 제공되는 기능 외에도 플러그인을 추가하여 확장할 수 있습니다. 

• 이미지 업로드 : 서버나 클라우드에 이미지를 업로드 가능
• 테이블 삽입 : HTML 테이블을 손쉽게 추가 및 수정
• 수식 입력 : LaTeX 기반의 수식 입력 지원
• 코드 블록 : 프로그래밍 코드 삽입을 위한 코드 하이라이팅 기능
• Markdown 지원 : Makrdown을 WYSIWYG 환경에서 사용할 수 있음

 

 

4. 멀티미디어 지원 (이미지, 비디오, 파일 업로드)

에디터 내에서 이미지, 동영상, 파일 등을 쉽게 삽입할 수 있으며, 서버에 업로드 하여 관리할 수도 있습니다.

• 직접 드래그 앤 드롭 지원
• 서버에 업로드 후 삽입
• Base64 인코딩 방식 지원 (CKEditor 5)

 

 

5. 크로스 브라우징 및 모바일 지원

최신 웹 브라우저 (Chrome, Firefox, Edge, Safari 등)와 완벽하게 호환됩니다. 모바일 친화적인 UI를 제공하여, 반응형 디자인이 가능합니다.

 

 

6. 강력한 보안 기능

- XSS(Cross-Site Scripting) 공격 방지

• 사용자가 에디터를 통해 악성 스크립트를 삽입하는 것을 방지합니다.

- HTML 필터링

• 안전하지 않은 태그를 자동으로 제거하여 보안성을 유지합니다.

 

 

7. 맞춤형 설정 가능

CKEditor는 기본 제공되는 기능 외에도 툴바, 스타일, 언어, 테마 등을 맞춤 설정할 수 있습니다.

ClassicEditor
    .create(document.querySelector('#editor'), {
        toolbar: ['bold', 'italic', 'link', 'undo', 'redo']
    })
    .catch(error => console.error(error));

 

위 설정을 적용하면, 굵에(Bold), 기울임(Italic), 링크 추가(Link), 실행 취소(Undo), 다시 실행(Redo) 기능만 사용 가능하도록 제한할 수 있습니다.

 

 

 

 

 

---

 

 

 

 

 

CKEditor 4 수명

 

 

 

CKEditor4는 OS버전과 LTS버전이 있습니다. OS(Open Source)버전은 유지보수 기간이 이전에 벌써 끝이 났고 LTS 버전으로 현재 CKEditor4 유지보수가 진행중에 있는걸로 알고 있습니다. CKEditor 공식 깃헙 사이트에서도 CKEditor4는 2012년에 출시되어 2023년 6월 30일에 지원 종료(EOL)가 되었음을 알리고 있고 CKEditor4 LTS 버전은 장기 지원을 하고 있다고 설명하고 있습니다. 그렇기 때문에 2028년 12월까지는 보안 업데이트와 중요 버그 수정이 보장됩니다.

 

 

 

 

 

CKEditor 4 사용자를 위한 중요 업데이트

 

CKEditor4 보안 알림

 

CKEditor4의 수명 종료 1주년이 되는 2024년 7월 1일부터 CKEditor4에 대한 보안 알림을 활성화합니다. 해당 변경 사항은 오픈 소스 버전 4.22와 CDN을 통해 제공되는 모든 이전 버전에 영향을 미칩니다. 계획된 변경사항에 대해서는 전용 문서에서도 확인할 수 있습니다.

 

 

 

 

 

CKEditor4 Download (Open Source)

 

오픈 소스 라이선스 조건에 따라 CKEditor 4.22.1 이하를 계속 사용할 수 있습니다. 그러나 오픈 소스 버전에는 더 이상 보안 업데이트가 제공되지 않으므로 애플리케이션 위험에 처하게 됩니다. CKEditor 4의 오픈 소스 버전을 다운로드 하려면 4.22.1 및 이전 태그를 사용합니다. CKEditor 4.22.1은 오픈 소스 라이선스 조건에 따라 사용 가능한 CKEditor4의 마지막 버전입니다.

 

 

 

 

 

---

 

 

 

 

 

CKEditor4 저장소 작업

 

Sample

폴더 'samples/' 에는 설치를 테스트하는데 사용할 수 있는 몇 가지 예가 들어있습니다. CKEditor4 예제를 방문하여 다양한 편집기 기능을 보여주는 풍부한 샘플을 확인하고, 소스 코드를 쉽게 보고, 복사하고 자신의 솔루션에서 사용할 수 있습니다.

 

 

테스트 환경

CKEditor4 테스트 환경 가이드에서 환경을 설정하고 테스트를 실행하는 방법에 대해 자세히 알아보세요.

 

 

문제보고

버그를 보고하고 기능 요청을 하려면 CKEditor4 깃헙 이슈 페이지를 사용합니다.

 

 

 

 

 

 

@Junesker

---