4.ckeditor 기타 설정. (크기, 플러그인, 스킨, 줄 간격, 변수저장 등)

4.ckeditor 기타 설정. (크기, 플러그인, 스킨, 줄 간격, 변수저장 등)

*수동 크기조절

창의 크기는 ckeditor>ckeditor.js안에 height를 검색해 보면 기본이 200으로 되어 있는데 이 수치를 변경하면 창 크기를 조절할 수 있다.

*자동 크기조절(autogrow)

내용이 많아지면 자동으로 에디터의 창의 크기가 늘어나게 설정할 수 있다.

아래와 같이 설정해 주면 된다.

대충 설정 이름을 보면 어떤 기능인지 알 수 있다.

config.extraPlugins = 'autogrow';

config.autoGrow_minHeight = 200;

config.autoGrow_maxHeight = 600;

config.autoGrow_bottomSpace = 50;

 

* CodeMirror 플러그인 설치

-CodeMirror 플러그인은 (Source) Syntax Highlighting 역할을 하는 플러그인으로 웹페이지에 소스코드, 스크립트 등을 자주 등록하는 사용자에게 유용하다.

-http://ckeditor.com/addon/codemirror에서 다운로드하여 서버의 /ckeditor/plugins/ 폴더 아래 압축 해제하여 업로드.

-CKEditor 의 설정파일 config.js 에 다음 설정을 추가한다.

config.extraPlugins = 'codemirror';

 

 

* icy_orange 스킨설정

1) http://ckeditor.com/addon/icyorange에서 다운로드하여 서버의 /ckeditor/skins/폴더 아래 압축 해제하여 업로드.

2) CKEditor의 설정파일 config.js에 다음 설정을 추가 한다.

config.skin = 'icy_orange';

 

* 줄 간격 조절

CKEditor를 사용하다보니 줄 간격이 좀 큰 것 같았다.

줄 간격 조절은 contents.css안에 보면 line-height 1.6;으로 되어있다.

0.5정도가 적당한 것 같다.

* CKEditor에 입력한 값을 변수로 저장하기.

 

DB에 값을 넘기기 위해 Editor에 입력한 값을 변수에 저장하여 사용한다.

 

$value=CKEDITOR.instances.ID.getData();

 

위의 소스에서 textarea의 ID만 직접 입력하면 CKEditor가 제공하는 Method인 getData를 통해서 그 내용을 가져오게 된다. 위의 내용을 변수에 대입하여 그 값을 POST 방식으로 넘긴다.