ckeditor toolbar 커스텀하기 아이콘 지우기 툴바 여러줄 한줄로 만들기 등

ck에디터 toolbar 커스텀하기

ck에디터의 Toolbar는 CKEDITOR.editorConfig 로 지정해줄 수 있습니다.

그러나 일부 화면에서만 다른 에디터 UI를 사용하고 싶다면 CKEDITOR.replace로 설정을 변경해줄 수 있습니다.

 

ck에디터 config.js

우선 기본 설정 및 기본 ui는 ckeditor4 폴더 내의 config.js 파일에 모두 정의되어 있어야 합니다.

config.toolbar = [
		{ name: 'document', items: [ 'Source', 'NewPage', 'ExportPdf', 'Preview', 'Print', '-', 'Templates' ] },
		{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', '-', 'Undo', 'Redo' ] },
		{ name: 'editing', items: [ 'Find', 'Replace' ] },
		{ name: 'links', items: [ 'Link', 'Unlink' ] },
		{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
		{ name: 'tools', items: [ 'Maximize' ] },
		{ name: 'about', items: [ 'About' ] },
        '/',
		{ name: 'styles', items: [ 'Font', 'FontSize' ] },
		{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
		{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike' ] },
		{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] }
	];

그 중에서 toolbar의 기본 설정 부분만 확인해드리자면 위와 같습니다.

저 items 안의 요소 하나하나가 아이콘 하나씩이라고 보시면 됩니다.

 

중간에 '/'의 의미는 ckeditor 툴바에서 한 줄을 띄우겠다는 뜻입니다.(다음 줄로 넘어가기)

그리고 items 배열 사이의 '-'는 툴바 사이사이 | 로 칸을 나누어주겠다는 의미입니다.

 

예시화면)

위 설정으로 나타난 ek에디터입니다.

만약 저 '/'이 없다면 가능한 한 줄로 에디터의 툴바를 띄우게 됩니다.

저 '/'를 두 번 쓰면 총 세 줄의 툴바가 완성될 것입니다.

 

ckeditor customConfig

그럼 이제 기본 설정을 커스텀한 파일을 만들고, 그 파일을 에디터 생성 시에 적용해보겠습니다.

우선 customConfig.js파일을 만들어주는데, 이 때 경로는 static 내의 어느 곳이든 상관 없습니다.

그리고 config 부분에서 변경하고 싶은 것들을 수정해줍니다.

config.toolbar = [
		{ name: 'insert', items: [ 'Image'] },
		{ name: 'styles', items: [ 'Font', 'FontSize' ] },
		{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
		{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike' ] },
		{ name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] }
	];

필요 없는 ckeditor의 기능과 아이콘들을 지워주고,

2줄 이었던 툴바를 한 줄로 줄여주었습니다.

예시화면)

이렇게 한 줄로 간단한 에디터가 만들어졌습니다.

 

그럼 그 파일을 replace를 통해 적용해주어야 합니다.

CKEDITOR.replace( 'editorID', {
    customConfig: '/static/경로/파일명.js'
});

 

주의할 점은, replace를 여러번 사용하면 에러가 나므로 CKEDITOR 로드 시 width, height, on 등은 함께 replace해주실 것을 권장드립니다.