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

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를 기준으로 한다.

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

Related Posts

JavaScript / 함수 / eval() / 문자열을 코드로 인식하게 하는 함수

JavaScript / 함수 / eval() / 문자열을 코드로 인식하게 하는 함수

eval() eval()은 문자열을 코드로 인식하게 하는 함수입니다. 문법 eval( string ) 예를 들어 eval( '2+2' ) 는 문자열 2+2가 아니라 계산한 결과 4입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> var jb = '2+2'; document.write( '<p>' + jb + '</p>' ); document.write( '<p>' + eval( jb ) + '</p>' ); </script> </body> </html>

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

.concat()  .concat()은 문자열을 이어 붙이는 메서드입니다. 문법 string1.concat( ) string1은 필수 요소, string2 등은 선택 요소입니다. 인수가 문자열이 아닌 경우 먼저 문자열로 변환한 다음 string1에 연결합니다. 예를 들어 'ab'.concat( 'cd', 'ef' ) 는 abcdef입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...

JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드

JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드

.includes() .includes()는 문자열이 특정 문자열을 포함하는지 확인하는 메서드이다. IE는 Edge부터 지원한다. 문법 string.includes( searchString, length ) searchString : 검색할 문자열로 필수 요소이다. 대소문자를 구분한다. length : 검색을 시작할 위치이다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다. 예제 abzcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z' ) zcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z', 2 ...

JavaScript / Object / String.substr() / 문자열 추출하는 메서드

JavaScript / Object / String.substr() / 문자열 추출하는 메서드

.substr() .substr()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substr( start, length ) start로 시작 위치를 정하고 length로 잘라낼 문자열의 길이를 정합니다. 예를 들어 var str = '123456789'; document.write( '<p>substring( 1, 5 ) : ' + str.substr( 1, 5 ) + '</p>' ); 는 23456을 출력합니다. start 값은 필수이고, length를 지정하지 않으면 문자열의 끝까지를 가져옵니다. 예제 <!doctype html> <html lang="ko"> ...

JavaScript / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리

JavaScript / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리

Lazy Loading 웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading입니다. 웹브라우저에 보이는 영역 안에 있는 이미지는 로드하고, 보이지 않는 부분은 로드하지 않습니다. 밑으로 스크롤하여 이미지가 있는 영역에 도달하면 그 때 이미지를 로드합니다. 이렇게 하면 불필요한 이미지 로딩으로 인한 속도 저하를 방지할 수 있습니다. Lozad.js Lozad.js는 Lazy ...

JavaScript / Object / Array.join() / 배열의 원소를 연결하여 하나의 값으로 만들기

JavaScript / Object / Array.join() / 배열의 원소를 연결하여 하나의 값으로 만들기

.join() .join()은 배열의 원소들을 연결하여 하나의 값으로 만듭니다. 문법 var jbStr1 = jbAry.join(); jbAry 배열에 있는 원소들을 하나의 값으로 만듭니다. 원소들의 구분은 콤마(,)로 합니다. 원소들의 구분을 다른 문자로 하려면 () 안에 원하는 문자를 넣습니다. var jbStr2 = jbAry.join( ' / ' ); 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...

JavaScript / Object / document.getElementsByTagName() / 특정 태그를 가진 요소 가져오는 메서드

JavaScript / Object / document.getElementsByTagName() / 특정 태그를 가진 요소 가져오는 메서드

.getElementsByTagName() .getElementsByTagName()는 특정 태그를 가진 모든 요소를 선택합니다. 선택된 요소는 유사 배열 객체로 반환됩니다. 문법 1 document.getElementsByTagName( 'tagname' ) 예를 들어 p 태그를 가진 첫번째 요소를 선택하려면 다음과 같이 합니다. document.getElementsByTagName( 'p' ) 예제 1 문서에서 p 태그를 가진 두번째 요소를 jb라는 변수에 넣고, 몇 가지 정보를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...

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

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 / String.toUpperCase(), String.toLowerCase()

JavaScript / Object / String.toUpperCase(), String.toLowerCase()

.toUpperCase() 문법 .toUpperCase()는 대문자로 변환하는 메서드이다. 예를 들어 다음은 ABC를 반환한다. 'abc'.toUpperCase() 예제 1 - 대문자로 변환하여 출력 문자열 Aaa를 대문자로 변환하여 출력한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> * { font-family: ...

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

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

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 다섯 가지의 타입이 있는데, 아래의 예는 모두 ...