프로그래밍/HTML

CKEditor 5 사용법

꾸션 2022. 1. 25. 12:08

홈페이지에서 글 편집기로 가장 많이 이용되고 있는 CKEditor 5를 사용하는 간단한 방법에 대해서 알아 보겠습니다.

 

CKEditor 5 데모 이미지
ckeditor 5 예제 이미지

 

흔히, WYSIWYG(What You See Is What You Get)형태의 HTML Rich Text Editor로 유명한 편집기들이 많이 있습니다.

과거 거의 독보적인 1등을 달리던 Summernote도 있으나, CKEditor 5가 무서운 기세로 평점과 인기를 올리고 있습니다.

다른 좋은 편집기도 있으니, 검색해보고 구미에 맞는 편집기를 사용하면 되겠습니다.

간단히 3가지 편집기에 대해 알아 보겠습니다.

 

  • CKEditor: Summernote와 많이 비교가 되며, 무서운 기세로 인기와 평점을 올리고 있는 편집기
  • Summernote: 과거 독보적인 1등 편집기
  • Tinymce: 티스토리에서 채택, (Tistory-Tinymce)

 

기본 사용방법은 편집기가 모두 비슷하나, 가장 뚜렷하게 차이가 나는 점은 커스텀마이징하는 방식, 이미지 업로드 방식, 동영상 링크 올리는 방식, 툴바(플러그인)추가 방식에서 조금씩 차이가 나며, 일부 기능은 비용을 지불해야 하므로 잘 고려해서 홈페이지에 설치 적용하면 좋을 것 같습니다. (각 에디터의 홈페이지에 가면 데모버전이 있으니 직접 사용해 보고 채택하세요.)

여기서는 CKEditor 5에 대해서 다뤄 보도록 하겠습니다.

 

CDN을 이용해서 적용하는 방법은 아래의 단 몇 줄만으로 해결이 가능합니다.

 

CKEditor 5 - Classic editor CDN 적용

에디터가 표시되어야 하는 부분에 아래의 html 태그를 삽입합니다.

<div id="editor"></div>

 

CKEditor 자바스크립트 소스를 가져오는 태그를 적당한 위치에 넣습니다. (head 태그 안쪽 혹은 body태그안의 아래쪽)

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

 

CKEditor를 생성하는 아래의 스크립트를 삽입합니다.

<script>
  ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .catch( error => {
      console.error( error );
    } );
</script>

 

위 3가지를 적용한 전체 예제소스는 아래와 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>CKEditor 5 – Classic editor</title>
  <script src="https://cdn.ckeditor.com/ckeditor5/31.1.0/classic/ckeditor.js"></script>
</head>
<body>
  <h1>Classic editor</h1>
  <div id="editor">
    <p>This is some sample content.</p>
  </div>
  <script>
    ClassicEditor
      .create( document.querySelector( '#editor' ) )
      .catch( error => {
        console.error( error );
      } );
  </script>
</body>
</html>

 

CKEditor 5에서는 총 5가지의 에디터를 제공하므로 원하는 방식을 채택해서 사용하세요.

아래에는 CDN으로 간단히 사용하는 방법과 데모링크이니 참고하시고 사용해 보세요.

 

CKEditor 5가지

 

※ Bootstrap 5에서도 UI가 잘 표현 됩니다.

 

CKEditor 5 플러그인 설치 방법

CKEditor 5 플러그인을 설치하는 방법을 알아보겠습니다. 플러그인 설치 방법으로 1) npm패키지를 이용하는 방법, 2) Online Builder를 이용하는 방법이 있습니다. 이중에 간편하면서 쉽고 빠르게 적용할

ccusean.tistory.com

 

CKEditor with all free plugins - 꾸션(ccusean)

Just test CKEditor with all free plugins.

ccusean.com