ACTIVE SERVER PAGE

ACTIVE SERVER PAGE > ckeditor - config.js 설정옵션들

등록일 : 2017-07-04 17:25 조회수 : 34,311

ckeditor의 환경설정 파일은 editor 폴더의 config.js 파일이 존재한다.
이 파일에서 환경설정을 할 수 있다.

또는 editor 가 표시되는 화일에서 스크립트를 이용해서 Json형태로 환경설정을 할 수도 있다.


/* Editor 에서 사용되는 기본적으로 제공하는 툴바의 버튼 - 단어단어마다 첫글자는 대문자 */

config.toolbar = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio','TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],'/',
['Styles','Format','Font','FontSize'],['TextColor','BGColor'],['Maximize', 'ShowBlocks','-','About']];

config.language = 'ko'; //언어설정
config.uiColor = '#EEEEEE'; //ui 색상
config.height = '300px'; //Editor 높이 
config.width = '777px'; //Editor 넓이
config.contentsCss = ['/css/style.css'],['/css/main.css']; //홈페이지에서 사용하는 Css 파일 인클루드
config.font_defaultLabel = 'Gulim';
config.font_names='Gulim/Gulim;Dotum/Dotum;Batang/Batang;Gungsuh/Gungsuh/Arial/Arial;Tahoma/Tahoma;Verdana/Verdana';
config.fontSize_defaultLabel = '12px';
config.fontSize_sizes='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;';
config.enterMode =CKEDITOR.ENTER_BR; //엔터키 입력시 br 태그 변경
config.shiftEnterMode = CKEDITOR.ENTER_P; //엔터키 입력시 p 태그로 변경
config.startupFocus = true; // 시작시 포커스 설정
config.allowedContent = true; // 기본적인 html이 필터링으로 지워지는데 필터링을 하지 않는다.
config.filebrowserImageUploadUrl = '/include/editor/upload/upload.asp'; //이미지 업로드 경로 (설정하면 업로드 플러그인에 탭이생김)
config.filebrowserFlashUploadUrl = '/include/editor/upload/upload.asp; //플래쉬 업로드 경로 (설정하면 업로드 플러그인에 탭이생김)
config.toolbarCanCollapse = true; //툴바가 접히는 기능을 넣을때 사용합니다.
config.docType = "<!DOCTYPE html>"; //문서타입 설정

config.extraAllowedContent = 'video[*]{*};source[*]{*}'; //video , embed 등 막힌 태그를 허용하게 하는 설정

위 설정은 콜백 파일에서 최종으로 넘겨야하는 인자가 있습니다.

첫번째 인수 : 넘어오는 값 그대로 리턴
두번째 인수 : 보여질 이미지 주소
세번째 인수 : 완료 alert 문구

window.parent.CKEDITOR.tools.callFunction(, '','업로드 완료 ');

이렇게 처리해 줘야 합니다.

//개별설정은 editor 페이지에서 아래처럼 JSON 처리방식으로 입력하면 됩니다.


	CKEDITOR.replace( 'board_contents', {
	width :'777px',	
	allowedContent:true,
	toolbar :[['NewPage','Preview','Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','-',
	'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','Outdent','Indent','HorizontalRule','Link','Unlink','-',
	'Find','Replace','SelectAll','Image','Flash','Table','SpecialChar'],
	'/',['Styles','Format','Font','FontSize','Undo','Redo'],['TextColor','BGColor'],['Cut','Copy','Paste','PasteText'],['Source']],
	filebrowserImageUploadUrl: '/include/editor/upload/upload.asp',
	filebrowserFlashUploadUrl: '/include/editor/upload/upload.asp>'
	});

내용의 값을 가져올경우는 getDate() 로 가져오시면 됩니다.

CKEDITOR.instances.board_contents.getData();

기타 사용방법은 http://docs.cksource.com/ckeditor_api/ 을 통해 찾아보실 수 있습니당~

목록으로