Ckeditor 4 툴바 Configuration

고려한2019.06.08 23:45조회 수 782댓글 0

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

 

    • 글자 크기
테이블, 아이프레임 가로 스크롤 일정 수 이상 신고받은 댓글 블라인드 처리하기

댓글 달기 WYSIWYG 사용

글쓴이 비밀번호
번호 제목 날짜
HOT 하이에어, 25일부터 아무도 없는 사천공항 취항 2020.09.11
HOT FSC는 '화물'이라도, LCC는 '할 게 없다' ·· 올해 안에 일부 파산 불가피 2020.09.02
HOT 에어부산, 목적지 없는 체험비행 상품 출시 ·· 항공 서비스학과 실습1 2020.08.26
HOT 보잉 최신 대형 B777X 항공기에 대한 재미난 정보 2020.08.18
HOT 영구결번 '일본항공 123편' 부활했다? 2020.08.08
공지 게시글과 항공위키 연계 관련하여 2018.02.15
공지 해외여행(항공) 준비할 것과 여행 팁 (총정리) 2015.03.12
47 SQL 쿼리 이용 검색, 바꾸기 2020.06.17
46 미디어위키 사이트맵(sitemap) 생성 2020.06.10
45 미디어위키, 소도구(Gadget) 기능 2020.04.24
44 미디어위키, 사용자 css 구성 2020.04.24
43 미디어위키, 공지사항 표시 2020.04.21
42 미디어위키, 위지윅 에디터 2020.04.15
41 미디어위키 업그레이드 관련 composer 설치 및 업데이트 2019.11.01
40 미디어위키, 각주 툴팁(미리보기) 만들기 2019.10.31
39 테이블, 아이프레임 가로 스크롤 2019.07.14
Ckeditor 4 툴바 Configuration 2019.06.08
37 일정 수 이상 신고받은 댓글 블라인드 처리하기 2019.04.27
36 [미디어위키] 리버티 스킨 메뉴 설정 방법 2018.11.26
35 [미디어위키] 업그레이드 방법 2018.11.18
34 연관글 애드온 출력 위치 마음대로 조정하기 2018.08.13
33 [미디어위키] 로고 변경 2018.04.20
32 임의 섬네일 랜덤으로 표출하는 방법 2018.03.06
31 본문에서 img 태그 읽어서 광고 display 유무 조절 2018.03.02
30 특정 게시글에서 광고 제거하기 2018.02.24
29 모바일 기기에서 작동 조건문으로 제어하는 방법 2018.02.07
28 확장자 없는 외부 이미지 호스팅 시 섬네일 생성 테스트 2018.01.23
27 게시판마다 다른 조건 결과 작동하기(광고 노출 등) 2018.01.22
26 [미디어위키] 애드센스 적용 방법 2017.09.01
25 미디어위키 사용자별 권한 설정 방법 2017.04.22
24 ckeditor 편집화면 보기(view) 및 소스(source) 폰트 변경 2017.02.18
23 첨부 파일 아이콘 출력 안하기 2017.02.15
22 referer 모듈, 애드온 때문에 SNS 공유 안되는 현상 2016.06.03
21 MAC에서 홈페이지 게시판 내용이 일부만 보입니다. 2016.05.21
20 [미디어위키] 저작권리 하단부 편집 2015.12.08
19 글 본문 보기(View) 및 편집(Edit) 상태에서의 글꼴, 문단 등 유형 변경하기 2015.04.28
18 iframe (지도) 등을 모바일에서 자동 리사이징 하기 2015.03.02