Post List

2015년 10월 30일 금요일

CKEditor

고객의 요구사항 중 파워포인트에 있는 글 및 그림을 웹에디터에 Copy를 할 수 있게 해달라고 요구한다. 이에 대하여 이것저것 찾던 중 OpenSource로 괜찮은 것을 하나 발견했다. 


CKEditor란 기존의 Redmine의 Wike방식의 에디터를 WYSIWYG(이지웍) 방식의 에디터로 사용할 수 있게 합니다.

CKEditor는 FCKEditor로 유명한 에디터가 V3.0으로 Upgrade 되면서 이름이 변경된것이다.

 ※ Redmine : 오픈 소스 프로그램으로 웹 기반의 프로젝트 관리 와 버그 추적 기능을 제공하는 도구이다. (출처 : 위키백과)

 ※ WYSIWYG(이지웍) : what you see is what you get의 약칭으로 사용자가 현재 화면에서 보고 있는 내용과 동일한 출력 결과를 얻을 수 있다는 개념 (두산백과)



1) CKEditor 공식사이트 (http://ckeditor.com/)
공식사이트를 통하여 CKEditor의 최신버전을 다운받을 수 있다.

2) CKEditor download (http://ckeditor.com/download)
Java나 ASP.NET 등에 대한 다양한 버전을 내려 받을 수 있다.

테스트를 위하여 standar Package 를 내려 받았다.

[그림 1]
원하는 디렉토리에 압축을 풀면 [그림 2] 와 같이 폴더와 파일을 확인할 수 있다.
[그림 2]
디렉토리 중 samples 밑에 index.html 을 더블클릭하면 브라우저에 [그림 3]과 같이 뜨는 것을 확인할 수 있다.
[그림 3]

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

3-1) 기본설정
1
<scripttype="text/javascript" src="${JS}/common/ckeditor/ckeditor.js"></script>
cs


3-2) Class 및 id를 이용한 CKEditor 붙이기
Class 사용하기
1
2
3
<textareaname="inputArticleContents” class="ckeditor" rows="20"cols="50">
</textarea>
cs

javascript로 CKEditor 사용설정
1
2
3
4
5
6
7
<script type=”text/javascript”>
window.onload =function() {
         CKEDITOR.replace( ‘ EDITOR가 삽입될 textarea의ID를 입력하시면됩니다. ‘ );
};
</script>
cs

3-3) Editor 에 입력한 값 변수로 저장
1
CKEDITOR.instances. EDITOR가 삽입된 textarea의 ID.getData();
cs