웹모아
웹모아[손님] 검색   로그인    


 
php와 웹서버
 


CKEDITOR 설치 및 설정
  2014-06-13 08:11:24 댓글:(0)   조회:5020


CKEDITOR 설치 및 설정



A. 설치법.

먼저 http://ckeditor.com/ 에서 CK에디터를 다운로드 받습니다.

FTP를 이용해 자신의 계정에 ckeditor 폴더를 업로드 합니다.

사용할 페이지의 <head>와 </head> 사이에 아래 소스코드를 추가합니다.





<script type="text/javascript" src="/업로드폴더/ckeditor.js"></script>



에디터를 사용할 텍스트에리어에 ID나 CLASS 어트리뷰트 값을 이용해 아래와 같이 적용할 수 있습니다.

1. ID를 이용한 방법.





<textarea id="editor1" name="editor1" style="width:100%;height:200px;"></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1' );
//]]>
</script>




2. CLASS를 이용한 방법.





<textarea name="editor2" class="ckeditor" style="width:100%;height:200px;"></textarea>



예제 :: http://coterie.hosting.paran.com/ckeditor/

B. 기본 설정법.설정법.

1. 스킨





<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
skin:'스킨폴더명'
});
//]]>
</script>




※ CKeditor 에서는 3가지 스킨을스킨을 기본적으로 포함하고 있습니다. (kama,office2003,v2)

예제 : http://coterie.hosting.paran.com/ckeditor/index2.html

2. 인터페이스 컬러

CKEditor 기본스킨을 사용할 시 위지윅 에디터의 인터페이스 UIUI 컬러를 설정할 수 있습니다.





<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
uiColor: '#14B8C4'
});
//]]>
</script>




예제 : http://coterie.hosting.paran.com/ckeditor/index3.html

3. 언어

ckeditor는 기본적으로 페이지의 언어에 맞춰맞춰 설정해 주지만 그렇지 않은경우 아래와 같이 가능합니다.





<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor2',{
language : 'english'
});
//]]>
</script>




예제 : http://coterie.hosting.paran.com/ckeditor/index4.html

4. 엔터 모드

엔터나 시프트+엔터를 누를때의 입력되는 소스를 결정합니다.

1 = <p></p>

2 = <br />

3 = <div></div>





<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
enterMode:'2'
shiftEnterMode:'3'
});
//]]>
</script>




예제 : http://coterie.hosting.paran.com/ckeditor/index5.html

5. 툴바

툴바에 출력할 아이콘을 설정할 있습니다.





<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
toolbar:
[
['Bold','-', 'Italic'],
['NumberedList']
]
});
//]]>
</script>




예제 : http://coterie.hosting.paran.com/ckeditor/index6.html

기본 툴바는 아래와 같습니다. 원하는 것만 선택해서선택해서 사용하시면 됩니다.

['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']

C. 커스텀컨피그 파일 사용법.

자신이 설정한 config 파일을파일을 통해 ckeditor를 커스터마이징 할 수 있습니다.





<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
customConfig : '커스텀설정js파일위치',
width: '100%',
height: 300
});
//]]>




아래는 전에 제가 사용하던 커스텀 설정입니다.





CKEDITOR.editorConfig = function( config ){
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>;
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.language = "ko";
config.resize_enabled = false;
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;
config.startupFocus = true;
config.uiColor = '#EEEEEE';
config.toolbarCanCollapse = false;
config.menu_subMenuDelay = 0;
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']];
};
API 문서 : http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html



 댓글 (0)


php와 웹서버
페이지: 1 / 1   


   서브 도메인설정 팁1
   mod_rewrite 로 유저사이트를 서브도메인으로1
   서브도메인 자동셋팅 Rewrite(리눅스 BIND,2633
   HTML에서 한글이 깨진다1221
   html문서에 한글 인코딩 지정 방법1543
   PHP 한글 깨짐현상 해결하기(html, mysql2363
CKEDITOR 설치 및 설정5021
   FCKeditor 설치법 정리15090
   브라우저 기반의 위지윅(WYSIWYG) 에디터(ED2979
     FCKeditor Version 2.1 간단설치2061
       FCK 에디터 설치, 그리고 기본 설정 (FCK E2139
   Tinymce 설치3558
   php-mysql 한글 깨짐 현상2553
   iis 서비스 설치3183
   윈도우용 mysql사용을 위한 환경설정3202
   윈도우용 mySql5 설치와 설정 13278
   제1강 php의 개념과 웹상에 게시된 php에 대한3221
   아파치의 httpd.conf 환경 설정3215
   윈도우용 php 5 설치3425
   아파치(Apache) 웹서버 설치3374
   php와 웹 강좌 - 초급부터 간단한 방명록을 작3272
≪ [1]   ≫

복수단어 검색은 공백(space)로 구분해 주세요.



 
최근 글
[손님]
97
87
240
423
659
392
433
246
366
3819
921
960
1224
979
4282
 
인기 글
[손님]
3693
3081
3926
3075
4821
3819
11407
4521
3367
3821
4599
3172
5240
3353
6867