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 용량차이가 좀 있으니 참고하셔서 다운받으시면 됩니다.
다운받은 파일을 압축 풀고나서
/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' } ];
적용 화면입니다.