My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다. AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.



2013.07.04 13:07

CKEditor - WYSIWYG editor

kay
조회 수 21319 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

CKEditor


라이센스 : 제한적 무료 ( 상세 : http://ckeditor.com/about/license )

Url : http://ckeditor.com/

Download : http://ckeditor.com/download   ( ckeditor_4.1.2_full.zip )

Test Url : http://www.uhoon.co.kr/test/1434.html

API Docs :  http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html


포함된 기능에 따라 Basic , Standard , Full Package 로 나뉩니다.. Plugin 용량차이가 좀 있으니 참고하셔서 다운받으시면 됩니다.


package.png


다운받은 파일을 압축 풀고나서 

/ckeditor/samples/index.html 열면 각종 도움말이 있으니 참고하세요.


우선 적용하는 방법입니다.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CKEditor Sample</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/test/1434/ckeditor/ckeditor.js"></script>
<script>

	$(document).ready(function() {
		CKEDITOR.replace( 'editor1' );
	});

	function fnGetValue()
	{
		var content = CKEDITOR.instances.editor1.getData()
		alert(content);
	}

	function fnSetValue()
	{
		CKEDITOR.instances.editor1.setData( "<p>Welcome to Korea</p>" );
	}
</script>
</head>
<body>
<textarea name="editor1" rows="30" cols="30"><p>Initial value.</p></textarea>
<input type="button" value="Get Value" onclick="fnGetValue();" />
<input type="button" value="Set Value" onclick="fnSetValue();" />
</body>
</html>


각종 설정은 config.js 파일에서 합니다.

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	config.language = 'ko';
	config.uiColor = '#AADC6E';
	config.height = '400px';
	config.width = '600px';
};



사용가능한 툴바 옵션

// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.
config.toolbar = [
	{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
	{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
	{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Scayt' ] },
	'/',
	{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
	{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
	{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
	{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
	'/',
	{ name: 'styles', items: [ 'Styles', 'Format' ] },
	{ name: 'tools', items: [ 'Maximize' ] },
	{ 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' ] },
	{ name: 'links' },
	{ name: 'insert' },
	'/',
	{ name: 'styles' },
	{ name: 'colors' },
	{ name: 'tools' },
	{ name: 'others' },
	{ name: 'about' }
];





적용 화면입니다.

ckeditor.png


?

List of Articles
번호 제목 글쓴이 날짜 조회 수
5 Javascript 를 이용한 동적 그래프 생성 "Smoothie Charts" file kay 2014.08.20 2872
4 부트스트랩(bootstrap) - 프론트엔드 프레임웍 " 반응형 웹 쉽게 제작하기 " kay 2014.04.29 2396
» CKEditor - WYSIWYG editor kay 2013.07.04 21319
2 브라우져에서 현재 위치(위경도) 읽어오기 - navigator.geolocation.getCurrentPosition() kay 2013.05.31 4254
1 카카오톡 + 카카오스토리 내보내기 연동 kay 2013.04.25 4238
Board Pagination Prev 1 Next
/ 1