회원가입

로그인

아이디
비밀번호
ID/PW 찾기
아직 회원이 아니신가요? 회원가입 하기

Ckeditor 4 툴바 Configuration

Profile
고려한

xe 에디터는 기본적으로 ckeditor를 사용한다.

현재 xe 1.11.x 버전에서는 ckeditor 4 적용

 

ckeditor는 플러그인이나 툴바 등을 자유롭게 설정할 수 있다.

툴바는 너무 많기 때문에 간략하게 사용하기 위해서는 config.removeButtons = ''; 등을 이용해서 제거하면 되지만 이것이 너무 많을 경우 차라리 처음부터 툴바 버튼 필요한 것만 구성해도 된다.

 

아래는 툴바 Full 구성했을 때다. 이 중에 필요한 것만 골라서 적용하면 된다.

 

// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.
config.toolbar = [
	{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
	{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
	{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
	{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
	'/',
	{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
	{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
	{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
	{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
	'/',
	{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
	{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
	{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
	{ name: 'others', items: [ '-' ] },
	{ name: 'about', items: [ 'About' ] }
];

// Toolbar groups configuration.
config.toolbarGroups = [
	{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
	{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
	{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
	{ name: 'forms' },
	'/',
	{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
	{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
	{ name: 'links' },
	{ name: 'insert' },
	'/',
	{ name: 'styles' },
	{ name: 'colors' },
	{ name: 'tools' },
	{ name: 'others' },
	{ name: 'about' }
];

 

 

또 다른 방법은 아래 링크에서 필요한 것만 골라 config 파일을 구성할 수 있다.

https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic

 

주의할 점은 자동으로 만들어주는 config 내용 중 직접 툴바를 구성하는 config.toolbarGroups = [ 를 사용하면 xe 에서 지원하는 별도 플러그인 기능 버튼을 보여줄 수 없다. 따로 입력하는 방법이 있기는 할텐데...

일단 확인될 때까지는 removeButtons 기능을 이용하는 것이 좋을 듯 하다.

 

댓글
0
Profile

로그인

아이디
비밀번호
ID/PW 찾기
아직 회원이 아니신가요? 회원가입 하기