ckeditor5 - toolbar 세팅

ckeditor5의 툴바에 원하는 메뉴를 세팅하고 싶다면

​

먼저 홈페이지에 들어가 원하는 기능을 세팅하여 빌드하여 다운로드 하여야한다.

​

주소는 아래와 같은데 진행은 어렵지 않다. 원하는 기능들을 선택 후 쭉~ 진행하고

​

다운로드 받으면된다. 물론 유료기능들은 돈을 지불해야한다.

​

이렇게 빌드하지 않고 기본 버전에 기능을 넣으면 지원하지 않는 기능이라고 나온다.

 

https://ckeditor.com/ckeditor-5/online-builder/

CKEditor 5 Builder

 

아래는 툴바에 원하는 메뉴들을 넣어본 소스이다.

​

ClassicEditor

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

//툴바 옵션

toolbar: {

items : ['bold', 'italic', 'link', 'imageUpload', 'insertTable', 'undo','fontSize','fontFamily','highlight', 'fontColor', 'fontBackgroundColor', 'code'],

shouldNotGroupWhenFull: true

},

language: 'ko',

table: {

contentToolbar: [

'tableColumn',

'tableRow',

'mergeTableCells'

]

},

​

}).then(function(editor) {

editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {

return new MyUploadAdapter(loader);

};

​

$('style').append('.ck-content { min-height: ' + $('textarea[name="ckeditor"]').height() + 'px !important; }');

objEditor = editor;

​

}).catch( error => { console.log( error ); } );

​

툴바 옵션에 들어 갈 수 있는 값들은 아래와 같다.

​

undo', 'redo', 'alignment:left', 'alignment:right', 'alignment:center', 'alignment:justify', 'alignment', 'fontSize', 'fontFamily', 'highlight:yellowMarker', 'highlight:greenMarker', 'highlight:pinkMarker', 'highlight:blueMarker', 'highlight:redPen', 'highlight:greenPen', 'removeHighlight', 'highlight', 'bold', 'italic', 'strikethrough', 'underline', 'blockQuote', 'ckfinder', 'imageTextAlternative', 'imageUpload', 'heading', 'imageStyle:full', 'imageStyle:alignLeft', 'imageStyle:alignRight', 'link', 'numberedList', 'bulletedList', 'mediaEmbed', 'insertTable', 'tableColumn', 'tableRow', 'mergeTableCells', 'indent', 'outdent', 'fontColor', 'fontBackgroundColor', 'code',