CKEditor 5 / 설정하고 사용하는 방법

JavaScript
Created 2022-05-15 Last Modified 2022-06-01

CKEditor는 JavaScript 기반의 WYSIWYG 에디터이다. 어떻게 설정하고 사용하는지 간략하게 알아본다.

Modern JavaScript rich text editor with a modular architecture. Its clean UI and features provide the perfect WYSIWYG UX for creating semantic content.

CKEditor에는 Classic editor, Inline editor, Balloon editor, Balloon block editor, Document editor 다섯 가지의 타입이 있는데, 아래의 예는 모두 Classic editor를 기준으로 한다.

1 CDN으로 사용하기
2 다운로드하여 사용하기
3 기타

CDN으로 사용하기

CDN 링크는 https://ckeditor.com/ckeditor-5/download/에서 확인한다.

ckeditor.js를 연결하고, textarea에 적용한다. document.querySelector;의 ID는 textarea의 ID이다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>CKEditor</title>
  </head>
  <body>
    <h1>CKEditor</h1>
    <form action="" method="POST">
      <textarea name="text" id="editor"></textarea>
    <p><input type="submit" value="전송"></p>
    </form>
    <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
    <script>
      ClassicEditor.create( document.querySelector( '#editor' ) );
    </script>
  </body>
</html>

한글로 사용하기 위해서는 ko.js를 연결하고 옵션을 추가한다.

<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/translations/ko.js"></script>
<script>
  ClassicEditor.create( document.querySelector( '#editor' ), {
    language: "ko"
  } );
</script>

에디터의 크기는 CSS로 정하는 것이 편하다.

<style>
  .ck-editor__editable { height: 400px; }
</style>

<style>
  .ck-editor__editable { height: 400px; }
  .ck-content { font-size: 12px; }
</style>

에디터에 적용되는 CSS는 https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html에서 볼 수 있다.

필요 없는 기능은 removePlugins로 제거한다.

<script>
  ClassicEditor.create( document.querySelector( '#editor' ), {
    removePlugins: [ 'Heading' ],
    language: "ko"
  } );
</script>

다운로드하여 사용하기

CKEditor 5 online builder에 접속한다.
원하는 에디터 타입을 선택한다. 여기서는 Classic으로 진행하겠다.

에디터에 포함할 플러그인을 선택한다. 별표가 있는 것은 프리미엄으로, 유료 제품이다.
선택을 마쳤으면 [Next step]을 클릭한다.

위의 것이 사용 가능한 플러그인, 밑에 것이 에디터에서 보이는 플러그인이다.
드래그하여 에디터에서 보일 플러그인은 정하고, 순서도 정한다. 나중에 코드로 변경할 수 있지만, 가능하다면 여기서 맞추는 게 편하다.
[Next step]을 클릭한다.

언어를 선택하고 [Next step]을 클릭한다.

[Start]를 클릭한고 잠시 기다리면...

다운로드 할 수 있다.

다운로드한 파일의 압축을 풀고 서버에 업로드한다. 연결할 스크립트는 build 폴더 안의 ckeditor.js이다.
나머지 코드는 CDN 사용 시의 코드와 같다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>CKEditor</title>
    <style>
      .ck-editor__editable { height: 400px; }
      .ck-content { font-size: 12px; }
    </style>
  </head>
  <body>
    <h1>CKEditor</h1>
    <form action="" method="POST">
      <textarea name="text" id="editor"></textarea>
    <p><input type="submit" value="전송"></p>
    </form>
    <script src="ckeditor/build/ckeditor.js"></script>
    <script>
      ClassicEditor.create( document.querySelector( '#editor' ) );
    </script>
  </body>
</html>

툴바에 보여지는 플러그인은 아래와 같은 방법으로 정할 수 있다.

<script>
  ClassicEditor.create( document.querySelector( '#editor' ), {
    toolbar: [
      'heading',
      '|',
      'bold',
      'italic'
    ]
  } );
</script>

기타

https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html

JavaScript

JavaScript / Object / Date / 당월 말일 구하는 방법

다음은 2022년 3월 1일이다. Date( 2022, 2, 1 ) 날짜 자리에 0이 들어가면 전달 말일이다. 즉 다음은 2022년 2월 28일이다. Date( 2022, 2, 0 ) 이를 이용하여 현재 달의 말일을 구할 수 있다. 다음은 오늘 날짜를 출력하는 것이고... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...

JavaScript / 함수 / String() / 숫자를 문자열로 변환하는 함수

String() String()은 숫자를 문자열로 변환하는 함수입니다. 문법 String( object ) object : 숫자 또는 숫자를 값으로 하는 변수 등을 입력합니다. 예제 변수 c의 값은 숫자 1과 숫자 2를 더한 3입니다. 변수 d의 값은 문자 1과 문자 2를 더한 12입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드

.every() .every()는 배열의 모든 원소가 조건에 맞는지 검사하는 메서드입니다. 모든 원소가 조건을 만족하면 true, 하나라도 만족하지 않으면 false를 반환합니다. 예제 배열의 원소를 오름차순으로 검사하고, 조건을 만족하지 않는 원소가 있으면 검사를 중지하고 false를 반환합니다. 모든 원소를 다 검사했는데 조건을 만족하지 않는 원소가 없으면 true를 반환합니다. 원소가 없는 빈 배열은, 조건은 만족하지 않는 원소가 없으므로 무조건 ...

JavaScript / 구문(Statement) 넣는 방법

자바스크립트는 줄바꿈을 하면 구문(Statement)이 종료된 것으로 봅니다. var jb1 = 'Lorem' var jb2 = 'Ipsum' 하지만, 구문이 완성되지 않았다면 다음 줄까지 해석합니다. 즉 var jb1 = 'Lorem' 과 var jb1 = 'Lorem' 은 같습니다. 구문이 종료되었음을 명확히 표시할 때는 세미콜론(;)을 사용합니다. var jb1 = 'Lorem'; var jb2 = 'Ipsum'; 세미콜론 사용은 선택사항이지만, 한 줄에 여러 구문을 쓸 때는 구문과 구문 사이에 꼭 ...

JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드

.removeAttribute() .removeAttribute()는 요소의 속성을 제거하는 메서드입니다. 문법 element.removeAttribute( attributename ) 예를 들어 document.getElementsByTagName( 'h1' ).removeAttribute( 'class' ); 는 문서의 첫번째 h1 요소의 class 속성을 제거합니다. 예제 첫번째 h1 요소의 class 속성을 제거해서 글자색이 검정색이 됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } .abc { color: red; } </style> </head> <body> <h1 class="abc">Lorem ...

JavaScript / Object / Array.splice() / 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣는 속성

.splice() .splice()는 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣습니다. 문법 array.splice( start, count ) 예를 들어 jbAry.splice( 1, 2 )는 jbAry 배열의 두번째 값부터 2개를 추출합니다. array.splice( start, count, value1, value2, ... ) 예를 들어 jbAry.splice( 1, 2, 'abc', 'def' )는 jbAry 배열의 두번째 값부터 2개를 추출하고, 그 자리에 abc, def 두 값을 ...

JavaScript / Object / Location / URL 정보 가져오는 객체

location location은 URL 정보를 가져오는 객체입니다. URL 전체 또는 일부의 정보를 가져올 수 있는데, 대표적인 것들은 다음과 같습니다. location location.host location.hostname location.href location.pathname location.protocol 예제 URL이 https://example.codingfactory.net/script/script.html 일 때, 각 객체 속성이 어떤 값을 가져오는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> h1 { ...

JavaScript / 다른 페이지로 리다이렉트(Redirect) 하기

자바스크립트를 이용해서 특정 URL로 접속했을 때 다른 URL로 이동시킬 수 있다. 다른 URL로 이동시키는 것은 window.location.href 를 이용한다. 예를 들어 window.location.href = 'http://www.abc.com/'; 은 웹브라우저로 접속했을 때 http://www.abc.com/으로 이동시킨다. 만약 http://www.abc.com/으로 접속했을 때 http://www.codingfactory.net/로 이동시키고 싶다면 다음과 같이 한다. if ( window.location == 'http://www.abc.com/' ) { window.location.href='http://www.codingfactory.net/'; } PHP / 다른 페이지로 리디렉션(Redirection)하는 방법

JavaScript / Object / Screen / 화면 정보 가져오는 객체

Screen Screen은 화면 정보를 가져오는 객체입니다. 속성은 다음과 같습니다. screen.width 화면의 가로 크기를 가져옵니다. screen.height 화면의 세로 크기를 가져옵니다. screen.availWidth 작업 표시줄이 차지하는 부분을 제외한 가로 크기를 가져옵니다. screen.availHeight 작업 표시줄이 차지하는 부분을 제외한 세로 크기를 가져옵니다. screen.colorDepth screen.pixelDepth IE는 버전 10 이상에서 사용할 수 있습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...

JavaScript / Object / Math.max(), Math.min()

Math.max(), Math.min() Math.max()는 주어진 값 중에서 최댓값을, Math.min()은 최솟값을 반환합니다. 문법 Math.max( number1, number2, number3, ... ) Math.min( number1, number2, number3, ... ) 예제 1 10, 20, 30 중에서 최댓값과 최솟값을 구합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( '<p>Math.max( 10, 20, 30 ) : ' + Math.max( 10, 20, 30 ) + '</p>' ); document.write( '<p>Math.min( 10, ...