CKEditor 사용법

CKEditor사용법.

 

Editor로사용한 소스는 CKEditor로, FCKEditor로 잘알려진 소스가 3.0 Version으로 Upgrade되면서이름이 변경된 것입니다. 게시물을 작성할 시에 이 Editor를붙임으로써 직접 HTML 코드를 편집할 필요 없이 Microsoft Word를사용하는 것과 같이 드래그 및 버튼의 클릭만으로 HTML 코드를 자동으로 편집해주는 기능을 제공합니다. 

이러한 기능을 위지위그(WYSIWYG ; What You See IsWhat You Get)이라고 합니다.

 

1.  설치

http://ckeditor.com/를 통해서 CKEditor의 최신버전을 다운로드 받으실 수 있습니다.

윈도우에서 사용할 수 있도록 zip 형태의 다운로드와, 리눅스 환경에서 사용할 수 있도록 tar.gz 형태의 다운로드를제공합니다. 또한 CKEditor의 이전 버전인 FCKEditor 역시 다운받을 수 있지만 더 이상의 업그레이드는 이루어지지 않을 예정이며, UI적인 측면에서도 가장 최근에 출시된 CKEditor쪽이 좋을듯 합니다.

 

2.  Sample및사용방법 숙지를 위한 페이지

<WEB server address>/<installCKEditor path>/_sample/index.html

을 통해서 Sample page로 접속할 수 있습니다. 저의 경우에는 RunaFramework의 web폴더 밑에 editor라는 새로운 폴더를 만들어 CKEditor의 압축을 풀었습니다. 따라서 http://localhost:8080/RUNA_FRAMEWORK/web/js/ckeditor/_samples/index.html

이러한 경로로 Sample page에 접속할 수 있습니다.

 

3.   연동방법

CKEditor는 기본적으로PHP에 설치하기 적합하도록 되어 있습니다. 하지만 자바스크립트 기반의 소스이므로 .NET 환경과 JAVA환경에서도 설치할 수 있습니다.

1)   기본설정

Javascript로 구현되므로 기본적으로 추가해줘야 하는 javascript파일을 불러옵니다.

<scripttype="text/javascript" src="${JS}/common/ckeditor/ckeditor.js"></script>

 

2)   Class 또는 id를 이용한 CKEditor 붙이기.

Textarea에CKEditor를 사용하는 방법에는 기본적으로 두 가지가 제공됩니다.

① Class명으로 CKEditor 사용하기

<textareaname="inputArticleContents” class="ckeditor" rows="20"cols="50">

</textarea> 와 같이 사용하면 다음에 소개할 javascript의 부가적인 추가없이도사용할 수 있습니다.

 

② javascript로 CKEditor 사용 설정

CKEditor를 사용하고자하는textarea에 대해서 javascript 설정을 함으로서 사용하는 방법이 존재합니다. Javascript 설정부분은 CKEditor가 삽입되고자하는 textarea에 들어갈 수도 있고, head에 script를 삽입할 수 있습니다.

<script type=”text/javascript”>

window.onload =function() {

         CKEDITOR.replace( ‘ EDITOR가 삽입될 textarea의ID를 입력하시면됩니다. ‘ );

};

</script>

위에 쓰여진 script는head부분에 삽입되었을 때를 기준으로 작성한 것입니다. 만약 EDITOR가 삽입되기를 원하는 textarea부분에 script를 입력하시려면 window.onload 함수를 제외하고 CKEDITOR~~~ 라인만 적어주시면 됩니다. Textarea에적으실 때 주의하실 점은 반드시 textarea 태그가 닫힌 뒤에script를 선언하셔야 합니다. 그렇지 않으면textarea안에 입력한 text로 인식되어 버립니다.

Class 명으로 지정하는 것이 훨씬 간단하고 쉬운 방법이지만 Javascript로 사용하게 될 경우에는 각각의 Editor 마다의설정을 지정할 수 있다는 장점이 존재합니다.

 

3)    Editor에 입력한 값 변수로 저장하기.

Insert 혹은 Update시에는값을 넘겨줘야 DB에 반영될 수 있으므로 Editor에 입력한값을 변수에 저장하여 사용하셔야 합니다.

CKEDITOR.instances. EDITOR가 삽입된 textarea의 ID.getData();

위의 소스에서 textarea의 ID만 직접입력해주시면 CKEditor가 제공하는 Method인getData를 통해서 그 내용을 가져오게 됩니다. 위의 내용을 변수에 대입하여 그 값을 POST 방식으로 넘기시면됩니다.

 

4.   Customconfig.

개인이 직접 CKEditor의 형태를 설정할 수 있습니다. 전체 Editor마다 적용되길 원하는 설정이라면 CKEditor 폴더의 config.js 파일에 설정하시면 전체에적용되고, 각각의 Editor마다 다른 설정을 갖도록 하시려면위의 설명처럼 javascript 방식으로 선언하셔야 합니다. 기본적으로언어나 UI색상, 스킨, 엔터모드설정 및 표시되는 아이콘 설정 방법에 대한 소개를 하겠습니다.

     1) 스킨

       <script type="text/javascript">

 CKEDITOR.replace( 'editor1',{
   skin:'스킨명'
  });

        </script>

※ CKeditor 에서 제공하는 3가지 스킨 (kama,office2003,v2)

2) 인터페이스 컬러

CKEditor 기본스킨을 사용할 시 Editor의 UI 컬러를 설정할 수 있습니다.

<scripttype="text/javascript">

    CKEDITOR.replace( 'editor1',{ uiColor: '#FFFFFF'} );

</script>

UI색상의 경우는 툴바에서 UIcolor라는 버튼을 만들 경우 색상을 직접 선택할 수 있도록 하는
Color Chooser를 통해서 더욱 다양한 색상을 지정할 수도 있습니다.

 

3) 언어

CKEditor는 기본적으로 페이지의 언어에 맞춰 설정해 주지만 그렇지 않은 경우
아래와 같이 직접 설정할 수도 있습니다.

<scripttype="text/javascript">

  CKEDITOR.replace('editor2',{ language : 'english' });

</script>

 

4) 엔터 모드

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

1 =<p></p>

2 = <br />

3 =<div></div>

<scripttype="text/javascript">

   CKEDITOR.replace( 'editor1',{
     enterMode:'2'
     shiftEnterMode:'3'

});

</script>

 

5) 툴바

<scripttype="text/javascript">

  CKEDITOR.replace('editor1',{
   toolbar:
    [['Bold','-', 'Italic'], ['NumberedList'] ]

});

</script>

 

툴바에 버튼을 지정할 시 ‘-‘ 또는 [ 와 ] 로 버튼 사이에 공백을 줄 수 있습니다.

‘/’ 를 사용하시게 되면 그 이후 입력하시는 내용은 다음줄로 표시하게 됩니다.

 

※기본적으로 제공하는 툴바의 버튼입니다.

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

 

6) config.js 파일 설정 방법

전체 Editor에적용되기를 원하는 내용이라면 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.enterMode =CKEDITOR.ENTER_BR;

  config.shiftEnterMode = CKEDITOR.ENTER_P;

  config.startupFocus = true;

config.uiColor = '#EEEEEE';

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

 

CKEditor에 대해 추가적으로궁금한 사항을 찾아보고 싶으시다면, 제공되는 API인
http://docs.cksource.com/ckeditor_api/을 통해 찾아보실 수 있습니당~

2011.01 오혜영에게 저작권이 있습니당.