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.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 |
