CKEditor 4 사용하기

"CKEditor 4 사용하기"

[2013.06.20] 문제발생

- 에디터에 커서를 놓고 초기 한/영 설정이 한글인 경우 최초 입력되는 값은 영어로 그 후 한글로 입력되는 문제.

예를 들어 "가" 를 입력했을때       rㅏ    알파펫 알과 아 입력되는 문제

- 이벤트 key 를 사용하였을 경우 첫째줄은 문제없이 입력되지만, 두번째 줄부터 자음과 모음이 분리되어 입력됨

[2013.11.21] 최근 4.3 버전으로 해보니 잘 됩니다.

최근 인터넷 익스플로러 10 ( IE10 ) 에서 CKEditor 3 의 문제점이 발견되고 있다.

그래서 최근 버전 4를 사용하면 문제점이 해결된다.

하지만 많은 부분이 변경되었거 jQuery 도 지원하지 않는 단점이 있다.

어떤 사람은 쉽게 구현이 가능할 수 도 있고, 아닐수도 있기에 사용하기라는 팁을 블로깅하기로 했다.

그리고 기존의 소스를 그대로 살리면서 업그레이드가 가능한지를 테스트했기에 다소 시간이 걸렸다.

단순히 에디터의 기능을 사용햇다면 큰 문제는 없다.

다만 첨부파일을 에디터에 삽입하는 기능이나 제거하는 기능등 파일 첨부와 연동되는 부분 그리고

저장 (서버로 전송) 할때 입력값이 잘 전달 되지가 파악해야 했다.

* 첨부파일 에디터 삽입은 기존(CKEditor3) 과 동일함.

기존에도 그랬는지 잘 모르겟으나... 이번 CKEditor 4 는 스킨과 플러그인을 이용하여 기능을 확장할 수 있다.

그래서 버전마다 기능이 제한적이다.

버전 종류는 베이직 , 스텐다드 , 풀 있으며, 본인이 직접 골라서 내려받으려면 Biulder 를 이용하면 된다.

[참고] 2013.06.19 풀버전을 내려받고 ckeditor 폴더명을 바꿀 경우 크롬에서 오류가 발생하고 있다.

CKEditor 4 데모 http://ckeditor.com/demo

Builder http://ckeditor.com/builder

빌더에서는 서비스팩 버전과 스킨 및 에디터 기능들은 직접 고를 수 있게 되어있다.

1. 에디터 호출

<script src="/ckeditor/ckeditor.js"></script>

<textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>

<script>

CKEDITOR.replace( 'editor1' );

</script>

기존과 동일하다.

2. 기본 config 설명

<script>
var ckeditor_config = {
  resize_enabled : false, // 에디터 리사이즈 여부
  autoUpdateElement : true, // 자동 textarea 업데이트 여부 (안됨)
  enterMode : CKEDITOR.ENTER_BR , // 에디터 엔터를 <br> 태그를 사용함.
  shiftEnterMode : CKEDITOR.ENTER_P , // 에디터 시프트 + 엔터를 <p> 태그를 사용함
  toolbarCanCollapse : true , // 에디터 툴바 숨기기 기능 여부
  extraPlugins : "tableresize" , // 에디터의 플러그인을 추가할 경우 이름 입력 ( 테이블 리사이즈 플러그인을 내려 받아야함.)
  removePlugins : "elementspath", // 에디터의 플러그인을 사용하지 않을 경우 이름 입력 ( 에디터 하단 상태바에 태그를 표시하는 플러그인)

  // 에디터 툴바를 설정함.
  toolbar : [
    [ 'Source', '-' , 'NewPage', 'Preview' ],
    [ 'Cut', 'Copy', 'Paste', 'PasteText', '-', 'Undo', 'Redo' ],
    [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
    [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
    '/',
    [ 'Styles', 'Format', 'Font', 'FontSize' ],
    [ 'TextColor', 'BGColor' ],
    [ 'Image', 'Flash', 'Table' , 'SpecialChar' , 'Link', 'Unlink']
    
  ] 

};

var editor = [ ];

// id 엘리먼트를 입력할 때 중복되는 id 명이 없어야 한다.
/*
CKEDITOR.replace( "content" , ckeditor_config ).on('key', function () {
  // 에디터에 값이 입력될때마다 textarea 에 업데이트한다. 하지 않을 경우 textarea 의 value 값을 알 수 없다.
  this.updateElement();
});
*/

// [2013.06.20] 위방법은 문제가 있는 듯 하여~ 아래와 같이 한다.
editor[1] = CKEDITOR.replace( "content" , ckeditor_config );

// submit 이나 ajax 전송할때 같이 입력해준다.
editor[1].updateElement();

</script>

on 이벤트를 사용한 이유는 textarea 에 자동으로 입력값이 업데이트 될 수 있게 하기 위해서 이다.

CKEditor3 에서는 이렇게 하지 않아도 됐었는 데... 없어진듯하다.

구찮게 모든 전송 이벤트에 업데이트를 하는 수밖에 ㅜ,ㅜ 

네이버 스마트에디터도 자동으로 업데이트하는 기능은 없는 듯하다.

Syaku Blog by Seok Kyun. Choi. 최석균.