ACTIVE SERVER PAGE

오래된 개발자라면 ckeditor의 전신이 FCKeditor를 들어봤을 것이다.

FCKeditor를 알면 최소 40대라는 걸 증명하는 ...

요즘은 jQuery를 많이 사용하니까 그 유명한 ckeditor를 사용하는 방법에 대해서 알아보자.

사용법은 정말 쉽다.

정말 쉬워야 쓰니 그 회사에서도 정말 쉽도록 만들었다. 물론, 무료로 사용할 수 있다.

개발자들도 개발업무에 치이다 보면 뭔가를 해야할 때 쉬운 것을 찾으려고 혈안이 되어 있을테지.

그래야 지긋지긋한 야근을 안 할 수 있으니까 말이야.

CKeditor는 Free이고 900만번이나 다운로드 당한 인기 좋은 에디터이다.

요즘은 에디터들이 많아져서 독보적이라고는 하지 못하겠지만 이 걸 사용해서도 다 사용하지 못할 정도로 많은 확장성을 갖고 있다.

1. ckeditor를 검색하여 사이트를 방문해 download를 한다.

* 오른쪽 상단에 Download버튼을 클릭하면 다운로드를 받을 수 있다. 난 그냥 간단하게 쓸 거니까 Basic 버전으로 받겠다.




* 사실 영어를 조금만 할 줄 알아도 이 사이트에서도 얼마든지 매뉴얼을 제공하니 이 글을 굳이 보지 않아도 되기는 하지만

그래도 한글이 편할테니 끝까지 한번 적어보자.

그리고 나도 여러번 해봤지만 언제나 할 때는 다시 기억을 더듬어야 하니 여기에 메모를 남겨놓는다 생각하면 되고.

(한살 한살 더 먹을 때마다 기억력이 줄어드는 느낌이 드니까 뭔가 보조기억장치를 더 많이 필요로 하기도 하고...)

2. 압축해제 및 웹에 업로드

다운로드한 파일의 압축을 풀어 보면 그 안에 ckeditor라는 폴더가 들어 있다.

그 폴더를 www 폴더에 그냥 올린다. 아래 처럼 사용할 수 있도록 말이다.


http:// /ckeditor/ 기본적으로는 위의 ckeditor를 웹에서 호출하면 동작을 하는데 .htaccess등으로 url에 뭔가를 하는 경우에는 안 될 수도 있으니 그럴 경우에는 그에 맞게 예외 적용을 해 주거나 해야 한다.

(예를 들면 CI나 Laravel 등 프레임워크글 사용하는 경우...) 업로드가 끝났으면 아래 주소를 불러보자! 잘되면 된거다.

http://ankyu.entersoft.kr/include/editor/samples/index.html

3. 적용
(1) HTML상에서 헤더 부분에 ckeditor/ckeditor.js 파일을 정의해 준다.

<script src="/include/ckeditor/ckeditor.js" type="text/javascript"></script>

요렇게~

(2) textarea에 class를 ckeditor라고 해주면 그 textarea가 곧바로 웹에디터로 변신을 하게 된다.
그리고 아래 스크립트를 넣어주면 된다.

<script>CKEDITOR.replace( 'ckeditor', {});</script>

이보다 더 쉬울 수는 없다!