CKEditor Tip

mirinae.maru

CKEditor config.js sample

CKEDITOR.editorConfig = function( config ) {
	config.toolbarGroups = [
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
		//{ name: 'clipboard', items: [ 'PasteFromWord', '-', 'Undo', 'Redo' ] },
		{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
		{ name: 'forms', groups: [ 'forms' ] },

		{ name: 'basicstyles', groups: [ 'basicstyles' ] },
		//{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
		{ name: 'links', groups: [ 'links' ] },
		{ name: 'insert', groups: [ 'insert' ] },
		{ name: 'colors', groups: [ 'colors' ] },
		{ name: 'styles', groups: [ 'styles' ] },
		{ name: 'tools', groups: [ 'Maximize','tools' ] },
		{ name: 'others', groups: [ 'others' ] },
		{ name: 'about', groups: [ 'about' ] }
	];
	//config.extraPlugins = 'pastefromexcel';
	config.extraPlugins = 'colorbutton,font,justify,print,pastefromword,liststyle';
	config.allowedContent = true;
	config.width = 700;
	config.font_defaultLabel = "나눔고딕";
	config.font_names = "굴림;돋움;바탕;궁서;굴림체;돋움체;바탕체;궁서체;나눔고딕;나눔명조;"+
      "ＭＳ ゴシック;ＭＳ Ｐゴシック;ＭＳ 明朝;レギュラー;"+
      "宋体;新宋体;黑体;"+
      "Leelawadee;"+
      "Arial;Comic Sans MS;Courier New;Lucida Sans Unicode;monospace;sans-serif;serif;Tahoma;Times New Roman;Verdana";
	config.removeButtons = 'Image,Flash,Smiley,Superscript,Subscript,Source,Save,Print,Templates,Cut,Copy,Paste,PasteText,PasteFromWord,Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Strike,Blockquote,CreateDiv,JustifyBlock,BidiLtr,BidiRtl,Language,Link,Unlink,Anchor,PageBreak,Iframe,ShowBlocks,About';
};

■ ckeditor를 삽입하기 위해서 html에서 “CONTENT“를 id로 textarea태그를 등록한다.

<td colspan="4" valign="top" 
	style="padding-top:10px;" 
	width="560px" height="350px">
	<textarea name="CONTENT" id="CONTENT" 
		menubar="simple" style="width:700px">
		<% CONTENT %>
	</textarea>
</td>

■ ckeditor를 위한 javascript부분이다. 

var display = "block";
var editor = CKEDITOR.instances.CONTENT;
if (editor) { editor.destroy(true); }
CKEDITOR.replace( 'CONTENT', {
	width:'100%',
	height:'300px',
	toolbarGroups: [{"name": 'tools', "groups": [ 'Maximize','tools' ] }],
	startupFocus:false, 
	on : {
		instanceReady : function(evt) {
			$("#"+evt.editor.id+"_top").css("display",display);
			$("#"+evt.editor.id+"_bottom").css("display",display);
			evt.editor.setReadOnly( true );
		}
	}
});

■ 최대화버튼만 보여주기, 아래의 코드를 추가하면 최대화 버튼만 CKEditor상에서 보여준다. 다른 옵션버튼을 전부 보여주기위해서는 아래 코드를 제거한다.

toolbarGroups: [{"name": 'tools', "groups": [ 'Maximize','tools' ] }]

■ CKEditor를 읽기 전용모드로 열기, 아래 setReadOnly함수에 true를 입력하면 읽기전용 모드, false이면 edit가능 모드가 된다.

evt.editor.setReadOnly( true );