CKEditor 설치

“웹 게시판 등에 사용하는 오픈소스 HTML 에디터 CKEditor 의 설치 방법입니다.”

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It’s a WYSIWYG editor that brings common word processor features directly to your web pages. Enhance your website experience with our community maintained editor.

바로가기 : http://ckeditor.com/


1. CKEditor 다운로드 및 서버 업로드
1) http://ckeditor.com/download 에서 Full Package 선택하고 Download 클릭 합니다. (2016. 02. 12. 기준 버전 4.5.7 다운로드)

2) zip 파일을 압축해제 후 하위에 있는 ckeditor 폴더를 서버에 업로드 합니다.

2. CKEditor 설치
1) 설치하고자 하는 페이지의 <head></head> 태그 사이에 다음 소스를 추가합니다.

2-1) class 를 이용한 에디터 추가.

2-2) ID 를 이용한 에디터 추가.

* ckeditor 설치가 완료 되었습니다. *

3. 설정변경
1) 툴바 변경 (필요한 최소한의 아이콘으로 재구성)
– 에디터 입력부 아래와 같이 수정

– config.js 아래와 같이 수정
(http://주소/ckeditor/samples 에 접속후 Toolbar Configurator 통해서 아래 파일 생성가능)

4. CodeMirror 플러그인 설치
1) CodeMirror 플러그인은 (Source) Syntax Highlighting 역할을 하는 플러그인으로 웹페이지에 소스코드, 스크립트 등을 자주 등록하는 사용자에게 유용합니다.

2) http://ckeditor.com/addon/codemirror 에서 다운로드하여 서버의 /ckeditor/plugins/ 폴더 아래 압축 해제하여 업로드.

3) CKEditor 의 설정파일 config.js 에 다음설정 추가

그런데 설치하고 보니 제가 사용하는 스타일과 다릅니다. 다른 Syntax Highlight 플러그인을 설치해야 겠습니다.

5. icy_orange 스킨설정
1) http://ckeditor.com/addon/icyorange 에서 다운로드하여 서버의 /ckeditor/skins/폴더 아래 압축 해제하여 업로드

2)?CKEditor 의 설정파일 config.js 에 다음설정 추가


6. 이미지 업로드기능(PHP) 추가

업로드 참조 : http://www.spacek.xyz/mle/?p=284
1) /files/images 폴더를 서버에 생성하고 권한을 777 로 변경합니다.
2) 위에서 생성한 /files 폴더에 다음 upload.php 파일을 업로드 합니다.

3) CKEditor 의 설정파일 config.js 에 다음을 추가 합니다.

4) 이미지 아이콘을 클릭하면 업로드 탭이 생성되어 있어 업로드 가능합니다.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다