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로 쓰든 그건 알아서 처리를 해야 할 것이다.
