ckeditor 툴바 심플하게 정리하기
CK에디터의 매뉴얼에서 제공하는 부분이기에 팁이라고 할 것도 없습니다만... 만약에 툴바를 좀 더 단순화 하길 원하신다면 이 방법을 쓰시면 됩니다. 더 좋은 방법이 있을지도 모르지만 저는 이렇게 사용 중입니다.
1.
common/js/plugins/ckeditor/ckeditor에 config.js라는 파일을 만드세요. (config.sample.js를 참고하시면 됩니다.)
해당 파일은
CKEDITOR.editorConfig = function( config ) {
적용할 소스들
}
적용할 소스들
}
과 같은 형식이 됩니다.
2.
만약 기존의 있는 것에서 몇 가지의 버튼을 제거하고 싶다면 removeButtons이나 removePlugins을 사용합니다. 에디터 컴포넌트를 많이 사용하고 계신다면 차라리 몇 개를 빼는 쪽이 편합니다. (참고로 이미 감추어진 버튼이나 플러그인도 있어서 이를 적용할 때 다시 생겨나기도 하기 때문에, 그때는 그것까지 함께 작성해야 합니다.)
ex)
config.removePlugins = 'elementspath,save,font';
config.removeButtons = 'Underline,JustifyCenter';
3.
아예 툴바의 플러그인들의 전체적인 구성을 바꾸고 싶으면 http://docs.ckeditor.com/#!/guide/dev_toolbar 이것을 참고해서 작성하시면 됩니다. 저는 에디터 컴포넌트를 사용하지 않아서 이 방식대로 툴바를 구성했습니다.
ex)
CKEDITOR.editorConfig = function( config )
{
config.toolbar =
[
[ 'NewPage','Preview' ],
[ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ],
[ 'Find','Replace','-','SelectAll','-','Scayt' ],
[ 'Image','Flash','Table','HorizontalRule','SpecialChar','PageBreak'],
[ 'Styles','Format' ],
[ 'Bold','Italic','Strike','-','RemoveFormat' ]
];
};
{
config.toolbar =
[
[ 'NewPage','Preview' ],
[ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ],
[ 'Find','Replace','-','SelectAll','-','Scayt' ],
[ 'Image','Flash','Table','HorizontalRule','SpecialChar','PageBreak'],
[ 'Styles','Format' ],
[ 'Bold','Italic','Strike','-','RemoveFormat' ]
];
};
※ xe의 컴포넌트를 추가하시기 위해선 'xecomponent' 를 추가하시면 됩니다.
댓글 2
CKEDITOR.editorConfig = function (config)
{
config.toolbarCanCollapse = false;
config.toolbarStartupExpanded = false;
config.enterMode = CKEDITOR.ENTER_BR;
config.fillEmptyBlocks = false;
CKEDITOR.dtd.$removeEmpty['i'] = false;
config.removeButtons = '';
config.toolbar = [
];
};
저 같은 경우는 이렇게 설정했습니다.
참조 : http://ankyu.entersoft.kr/lecture/ASP/ckeditor_02.asp