본문 바로가기

WEB/KimsQ-2.X.X

ckeditor5 - toolbar 편집하기


ckeditor5  toolbar 편집하는 방법입니다.
아래와 같이 툴바 기능을 편집하시려면 옵션명을 수정 하면 됩니다.

ckeditor5 - toolbar

 

ClassicEditor
    .create( document.querySelector( '#editor' ), {
     //----------------------------------------------------------------
     // 여기 툴바 부분의 옵션명을 넣어주면 원하는 설정을 할수 있습니다.
        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
     //----------------------------------------------------------------  

        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
            ]
        }
    } )
    .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',

 

참조 

https://stackoverflow.com/questions/47390766/how-do-i-get-toolbar-available-items-in-ckeditor-5

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html

 

반응형

'WEB > KimsQ-2.X.X' 카테고리의 다른 글

킴스큐 이미지 삭제 프로세스  (0) 2019.11.05
모달 관련 분석  (0) 2019.05.30
게시물 임시저장 개념 [ 그누보드 ]  (0) 2019.03.12