Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

[ckeditor] jQuery 아답터(adaptor) 함수들

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

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다