[해피CGI][cgimall] CKEditor5 V12.0.0

CKEditor5가 이전에는 Classic, Ballon, inline 이렇게 3가지 타입이 있었는데요. 

이번 에는 Ballon Block, Document 타입의 편집기가 추가되었네요.

특히 Document 타입이 마음에 드는거 같습니다. ^^



소스다운로드에 Ballon Block, Document 의 2가지 압축파일을 모두 첨부하고 싶었는데요. 

현재 CKEditor5 에서 Ballon Block의 소스코드는 제공이 되지 않는 상태네요.

그래서 안타깝게도 Document 의 소스코드 편집기 소스만 첨부해 두었습니다.

 

 

사용하는 방법은 2가지 방식이 있습니다. 

스크립트를 CDN 방식으로 사용하는 방법과... 첨부된 압축파일을 이용하여 스크립트를 서버에 업로드 하여 사용하는 방식이 있습니다. 

CDN 방식으로 사용하는 방법에 대해서 설명 드립니다. 

 

 

※출처 : https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html#document-editor


1.CND 호출하기 
 <script src="https://cdn.ckeditor.com/ckeditor5/12.0.0/decoupled-document/ckeditor.js"></script> 


2.툴바 영역 선언하기
 <div id="toolbar-container"></div>


3.에디터 영역 선언하기

<div id="editor">

    <p>This is the initial editor content.</p>

</div>

4.에디터 호출하기

<script>

   DecoupledEditor

      .create( document.querySelector( '#editor' ) )

      .then( editor => {

         const toolbarContainer = document.querySelector( '#toolbar-container' );

 

         toolbarContainer.appendChild( editor.ui.view.toolbar.element );

      } )

      .catch( error => {

         console.error( error );

      } );

</script>



※팁

Document 에디터의 툴바 기능도 컨트롤 가능 합니다. 

<script>

   DecoupledEditor

      .create( document.querySelector( '#editor' ),{

         //removePlugins: [ 'Heading', 'Link' ], //기본 툴바에서 필요 없는 부분을 삭제할 수 있습니다.

         //toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ] //기본 툴바를 사용하지 않고 원하시는 툴바만 추가하여 사용할 수 있습니다.

      } )

      .then( editor => {

         const toolbarContainer = document.querySelector( '#toolbar-container' );

 

         toolbarContainer.appendChild( editor.ui.view.toolbar.element );

      } )

      .catch( error => {

         console.error( error );

      } );

</script>

직접 사용해보니 removePlugins 보다는 toolbar 를 직접 설정하여 사용하는 방식을 추천 드립니다. 

removePlugins 을 사용할 경우 기존의 툴바 영역 구분라인을 삭제할 수 없었습니다. 
( 해드라인 속성만 제거해 봤는데요. 툴바 구분선이 남아 있습니다. )