1. 다음 URL에서 CKEditor 4 풀 버전을 다운로드 받습니다.
자신이 기능을 선택해서 다운받는 옵션도 있지만, 일단 풀 버전을 다운로드 받은 다음에 메뉴를 커스터 마이즈 해서 사용하는게 편할 것 같습니다.
https://ckeditor.com/ckeditor-4/download/
2. 압축을 풀면 ckeditor 폴더에 모든 파일들이 들어 있습니다. 개발용 웹사이트를 만들고 웹 루트 아래 적당한 곳에 옮겨 둡니다.
– /editor/ckeditor 폴더를 만들었습니다.
– images 폴더는 CKEditor 에서 업로드한 이미지가 저장될 폴더 입니다.
– editor.php 파일은 CKEditor 로 글을 작성할 폼 페이지입니다.
– upload.php 파일은 이미지 업로드 처리를 하는 파일 입니다.
3. 에디터를 사용하는 웹페이지를 만듭니다. (/editor/editor.php)
– id 가 “contents”인 <textarea>를 사용해서 에디터를 생성합니다.
<textarea id=”contents” name=”contents”></textarea>
꼭 <textarea> 여야 하는 것은 아닙니다. <div> 태그 등도 사용가능합니다. 하지만 폼 데이터를 나중에 전송처리하기 편리하므로 <textarea>를 사용합니다.
– ckeditor 폴더 내에 있는 ckeditor.js 파일을 포함합니다.
<script type=”text/javascript” src=”./ckeditor/ckeditor.js”></script>
– CKEditor 를 생성합니다.
CKEDITOR.replace(‘contents’);
위의 <textarea>가 가지는 id 값을 인자로 주어서 생성합니다. DOM이 생성되어 있어야 하므로 여기서는 <body> 태그의 onload 이벤트에서 호출합니다. 그외에서 jQuery를 사용한다면 $(document).ready(); 를 사용하거나, <textarea> 태그 뒤쪽에서 <script> 태그를 이용해서 호출 하는 방법이 있습니다.
– 폼 submit 시 에디터의 내용을 <textarea> 로 넣어 주는 코드를 작성합니다. 에디터로 작성한 글이 에디터 생성의 타겟이었던 <textarea> 에 들어가 있지는 않습니다. 그러므로 <textarea> 로 작성한 내용을 넣어주는 작업이 필요합니다.
CKEDITOR.instances.contents.updateElement();
4. CKEditor 설정 파일을 수정합니다.(/editor/ckeditor/config.js)
– 에디터의 높이를 지정합니다.
config.height = 400;
– 에이터 상단의 툴바를 접을 수 있는 기능을 활성화 합니다.
config.toolbarCanCollapse = true;
– 폰트 선택상자에 한글 폰트를 추가합니다.
config.font_names = ‘맑은 고딕/Malgun Gothic;굴림/Gulim;돋움/Dotum;바탕/Batang;궁서/Gungsuh;’ + config.font_names;
폰트는 세미콜론(;) 으로 구분되고 “선택 상자에 보여질 이름 / 콤마로 분리된 폰트명들” 로 구성됩니다. 예로 ‘Arial/Arial, Helvetica, sans-serif;’로된 것을 선택했다면 로 태그가 생성됩니다.
– 이미지 업로드 URL 을 지정합니다.
config.filebrowserUploadUrl = ‘/editor/upload.php’;
기본 설치시 이미지 업로드 창에서 이미지를 선택해서 서버로 업로드하는 탭이 없습니다. 이 설정을 넣어주면 업로드 탭이 생성됩니다.
5. 이미지 업로드 처리하기
– config.js 파일에서 config.filebrowserUploadUrl 를 지정하면 이미지 업로드 창에 서버로 업로드 탭이 생성됩니다. 이 기능은 선택된 이미지 파일을 iframe 을 타겟으로 해서 서버로 업로드합니다.
– 에디터가 이미지 업로드시 전달하는 정보는 다음과 같습니다.
http://localhost:8080/editor/upload.php?CKEditor=contents&CKEditorFuncNum=1&langCode=ko
– GET 방식으로 CKEditor, CKEditorFuncNum, langCode 를 전달합니다.
– POST 방식으로 “upload” 를 키로 파일 데이터를 전달 합니다.
– 서버측 프로그램에서는 업로드가 성공하면 자바스크립트를 출력해서 CKEditor에 업로드된 이미지를 표시합니다.
6. 서버측 이미지 업로드 프로그램입니다. (/editor/upload.php)
– 코드에 대한 설명은 주석을 참고하세요.
7. 에디터의 메뉴를 사용자 정의하는 방법입니다.
– /editor/ckeditor/samples/toolbarconfigurator/index.html 에 메뉴를 설정할 수 있는 프로그램이 포함되어 있습니다.
– 보여주지 않을 버튼을 체크해제하고 “Get toolbar config” 버튼을 눌러 설정을 생성한후 config.js 파일에 복사해 넣으면 됩니다.
※ 참고사항
에디터에서 엔터키를 치면
태그가 삽입이 됩니다. 새 paragraph 를 생성하는 것입니다. 기본적으로 태그간의 간격이 넓기 때문에 태그를 이용한 줄바꾸기를 원할 때가 있습니다.
“Shift + Enter” 키를 누르면 이 삽입 됩니다.
