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 기능을 이용하는 것이 좋을 듯 하다.