A. 설치법.
먼저 http://ckeditor.com/ 에서 CK에디터를 다운로드다운로드 받습니다.
FTP를 이용해 자신의 계정에 ckeditor 폴더를 업로드업로드 합니다.
사용할 페이지의 <head>와 </head> 사이에 아래 소스코드를소스코드를 추가합니다.
1.<script type="text/javascript" src="/업로드폴더/ckeditor.js"></script>에디터를 사용할사용할 텍스트에리어에 ID나 CLASS 어트리뷰트 값을 이용해 아래와 같이 적용할 수 있습니다.있습니다.
1. ID를 이용한 방법.
1.<textarea id="editor1" name="editor1" style="width:100%;height:200px;"></textarea> 2.<script type="text/javascript"> 3.//<![CDATA[ 4. CKEDITOR.replace( 'editor1' ); 5.//]]> 6.</script>2. CLASS를 이용한 방법.방법.
1.<textarea name="editor2" class="ckeditor" style="width:100%;height:200px;"></textarea>예제 :: http://coterie.hosting.paran.com/ckeditor/
B. 기본 설정법.설정법.
1. 스킨
1.<script type="text/javascript"> 2.//<![CDATA[ 3. CKEDITOR.replace( 'editor1',{ 4. skin:'스킨폴더명' 5. }); 6.//]]> 7.</script>※ CKeditor 에서는 3가지 스킨을스킨을 기본적으로 포함하고 있습니다. (kama,office2003,v2)
예제 : http://coterie.hosting.paran.com/ckeditor/index2.html
2. 인터페이스 컬러
CKEditor 기본스킨을 사용할 시 위지윅 에디터의 인터페이스 UIUI 컬러를 설정할 수 있습니다.
1.<script type="text/javascript"> 2.//<![CDATA[ 3. CKEDITOR.replace( 'editor1',{ 4. uiColor: '#14B8C4' 5. }); 6.//]]> 7.</script>예제 : http://coterie.hosting.paran.com/ckeditor/index3.html
3. 언어
ckeditor는 기본적으로 페이지의 언어에 맞춰맞춰 설정해 주지만 그렇지 않은경우 아래와 같이 가능합니다.
1.<script type="text/javascript"> 2.//<![CDATA[ 3. CKEDITOR.replace( 'editor2',{ 4. language : 'english' 5. }); 6.//]]> 7.</script>예제 : http://coterie.hosting.paran.com/ckeditor/index4.html
4. 엔터 모드
엔터나 시프트+엔터를 누를때의누를때의 입력되는 소스를 결정합니다.
1 = <p></p>
22 = <br />
3 = <div></div>
1.<script type="text/javascript"> 2.//<![CDATA[ 3. CKEDITOR.replace( 'editor1',{ 4. enterMode:'2' 5. shiftEnterMode:'3' 6. }); 7.//]]> 8.</script>예제 : http://coterie.hosting.paran.com/ckeditor/index5.html
5. 툴바
툴바에 출력할 아이콘을 설정할 수수 있습니다.
01.<script type="text/javascript"> 02.//<![CDATA[ 03. CKEDITOR.replace( 'editor1',{ 04. toolbar: 05. [ 06. ['Bold','-', 'Italic'], 07. ['NumberedList'] 08. ] 09. }); 10.//]]> 11.</script>예제 : http://coterie.hosting.paran.com/ckeditor/index6.html
기본 툴바는 아래와 같습니다. 원하는 것만 선택해서선택해서 사용하시면 됩니다.
['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']
C.C. 커스텀컨피그 파일 사용법.
자신이 설정한 config 파일을파일을 통해 ckeditor를 커스터마이징 할 수 있습니다.
1.<script type="text/javascript"> 2.//<![CDATA[ 3. CKEDITOR.replace( 'editor1',{ 4. customConfig : '커스텀설정js파일위치', 5. width: '100%', 6. height: 300 7. }); 8.//]]>아래는 전에 제가 사용하던 커스텀 설정입니다.
01.CKEDITOR.editorConfig = function( config ) 02.{ 03. config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22%3E'">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'</A>; 04. config.font_defaultLabel = 'Gulim'; 05. config.font_names = 'Gulim/Gulim;Dotum/Dotum;Batang/Batang;Gungsuh/Gungsuh;Arial/Arial;Tahoma/Tahoma;Verdana/Verdana'; 06. config.fontSize_defaultLabel = '12px'; 07. 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;'; 08. config.language = "ko"; 09. config.resize_enabled = false; 10. config.enterMode = CKEDITOR.ENTER_BR; 11. config.shiftEnterMode = CKEDITOR.ENTER_P; 12. config.startupFocus = true; 13. config.uiColor = '#EEEEEE'; 14. config.toolbarCanCollapse = false; 15. config.menu_subMenuDelay = 0; 16. config.toolbar = [['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','TextColor','BGColor','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','Link','Unlink','-','Find','Replace','SelectAll','RemoveFormat','-','Image','Flash','Table','SpecialChar'],'/',['Source','-','ShowBlocks','-','Font','FontSize','Undo','Redo','-','About']]; 17.};
