ckeditor는 기본으로 jQuery 아답터를 갖고 있다. 심지어 W3C schools에도 jQuery가 기본 설명으로 들어갈 정도니, jQuery의 위상은 정말 높은 것 같다. 당연히 기본적인 사용법을 보렴면 documentation을 봐야 한다.

대충 요약한다.

일단 jQuery 아답터를 사용하렴면 아래처럼 코드를 서야 한다. 2번째 줄이 추가로 필요한 줄이다.

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

아래 함수를 사용하면 div든 뭐든 죄다 ckeditor로 만들 수 있다. 단, form 내의 textarea가 아닌 경우에는 save 버튼이 비활성화되는 듯하다.

$( 'textarea.editor' ).ckeditor();

jQuery 채인도 당연히 이용할 수 있다.

$( '.section-x' )
    .find( 'textarea.editor' )
        .ckeditor()
    .end()
    .find( 'a' )
        .addClass( 'mylink' )
    .end();

콜백 함수도 사용할 수 있고, 설정도 사용할 수 있다.

$('.jquery_ckeditor')
    .ckeditor( function() { /* callback code */ }, { skin : 'office2003' } );
    .ckeditor( callback2 );

위 함수를 실행하면 ckeditor를 두 개 만드는 게 아니라 콜백 함수를 두 개 추가하는 게 된다고 설명하는 듯하다. 번역에 자신없으니 원문 살펴보기 바란다.

아래처럼 스면 editor의 인스턴스를 얻을 수 있다.

var editor = $('.jquery_ckeditor').ckeditorGet();
alert( editor.checkDirty() );

위에서 alert( editor.checkDirty() ); 부분은 인스턴스가 제대로 불려왔는지 확인하는 부분이지 인스턴스를 얻기 위해 필수는 부분이 아니다. checkDirty()는 에디터 내용이 초기 내용인지 편집을 했는지 확인하는 거다. 자동저장 같은 걸 할 때 사용하면 되는 함수다.

위에 들어가는 $(‘.jquery_ckeditor’)는 처음에 $(‘.jquery_ckeditor’).ckeditor() 함수를 사용했던 그 놈이다.

당연히 내부 데이터를 가져올 수 있는 함수를 제공한다면서 아래 코드를 써 놨다. 그런데 내가 사용했을 때는 작동하지 않았다.

// Get the editor data.
var data = $( 'textarea.editor' ).val();
// Set the editor data.
$( 'textarea.editor' ).val( 'my new content' );

이 함수는 CKEDITOR.config.jqueryOverrideVal을 false로 설정하면 작동하지 않는다고 한다. 나도 한 번 체크해 봐야겠다.

그래서 나는 그냥 고전적인 방법을 사용해서 내용을 얻었다.

alert(editor.getData());
editor.setData('ddd');

기본적으로 에디터 내의 내용을 모두 수정한 다음에 editor.destroy() 를 실행하면 변한 내용이 그대로 내용에 가서 달라붙게 된다. 물론 내용을 db에 넣든, file로 쓰든 그건 알아서 처리를 해야 할 것이다.