wysiwyg web editor Ckeditor 설치 및 설정
http://www.autoboy.pe.kr/130
Ckeditor는 웹브라우저를 이용하여 글 작성할 때 편리하도록 다양한 도구를 제공하는 웹 편집기다. 진행하고 있는 프로젝트에 웹 편집기를 적용하고자 구글을 검색하여 무료 편집기를 알아본 결과 Ckeditor가 별다른 설정 없이도 한글을 기본으로 지원하고 다른 어떤 편집기보다 기능이 막강하여 설치해 보았다.
설치법
ckeditor 사이트에서 다운로드를 받아 적당한 디렉토리에 업로드 한다.
필자의 경우 Ckeditor을 업로드 한 디렉토리
/board/ckeditor
Cheditor 편집기를 사용할 페이지 사이에 다음을 추가한다.
?1
필자의 경우 적용한 예
?1
에디터를 사용 할 textarea에 ID나 CLASS attribute 값을 이용해 적용할 수 있는데, 필자의 경우 기존 게시판을 관리자 설정에 따라 에디터 사용 여부를 결정하고자 ID attribute로 지정하였다.
?123456
위 설정 만으로 ckeditor 편집기를 사용할 수 있다.
다른 스킨 사용법
Ckeditor은 기본적으로 3개의 스킨을 제공하고 있다. 다른 스킨을 사용하고자 할 때는 아래처럼 사용하고자 하는 스킨의 경로를 지정하면 된다.
?1234567
엔터 모드
엔터나 시프트+엔터를 누를 때의 입력되는 소스를 결정한다.
1 =
2 =
3 =
?12345678
툴바 아이콘 출력지정
툴바에 출력할 아이콘을 설정할 수 있다.
?123456789
javascript에서 공백 체크
javascript로 입력값이 공백일 때 체크
?123456 if(CKEDITOR.instances.content.getData() == '') { window.alert('내용을 입력해 주세요.'); CKEDITOR.instances.content.focus(); return false; }
Textarea의 넓이와 높이 지정
Textarea의 넓이와 높이를 지정할 수 있다.
?12345678
필자가 적용한 게시판 예 - 툴바 이이콘을 꼭 필요한 것 만 출력 되도록 설정하였다.
필자가 응용하여 적용한 예 - 홈페이지 내용을 관리자가 Ckeditor 편집기를 이용하여 수정할 수 있도록 관리자 페이지에 적용해 보았다.
Ckeditor은 기본 설정만으로 사용할 수 있으나, 이미지 파일 업로드를 할 수 없어 불편하다.
그러나 업로드 attribute 지정과 업로드 된 파일 처리 부분을 추가하면 이미지 파일 업로드가 가능하다.
이미지 파일업로드 구현
아래와 같이 업로드 된 이미지 파일을 처리할 upload.php를 구현하고 Ckeditor가 설치 된 경로에 업로드한다.
주의 : 파일 이름이 한글이거나 공백이 포함 된 경우 체크하는 부분이 없으므로 실제 사용을 위해서는 추가해 사용하기 바란다.
upload.php
?123456789101112131415161718192021222324252627 window.parent.CKEDITOR.tools.callFunction($funcNum, '$save_url', '업로드완료');""; } ?>
?12345
이미지 설정화면에 업로드를 할 수 있는 탭이 추가 되었다.
또한 Ckfinder를 추가로 설치하면 서버의 특정 폴더를 웹하드처럼 사용할 수 있다.
2011-08-04 12:00:34
1673
48
1
4
