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
반응형
'IT 인터넷 > KimsQ-2.X.X' 카테고리의 다른 글
킴스큐 이미지 삭제 프로세스 (0) | 2019.11.05 |
---|---|
모달 관련 분석 (0) | 2019.05.30 |
게시물 임시저장 개념 [ 그누보드 ] (0) | 2019.03.12 |