설치법
ckeditor 사이트에서 다운로드를 받아 적당한 디렉토리에 업로드 한다.
필자의 경우 Ckeditor을 업로드 한 디렉토리
/board/ckeditor
Cheditor 편집기를 사용할 페이지 <head></head> 사이에 다음을 추가한다.
<script type="text/javascript" src="/설치경로/ckeditor.js"></script>필자의 경우 적용한 예
<script type="text/javascript" src="/board/ckeditor/ckeditor.js"></script>에디터를 사용 할 textarea에 ID나 CLASS attribute 값을 이용해 적용할 수 있는데, 필자의 경우 기존 게시판을 관리자 설정에 따라 에디터 사용 여부를 결정하고자 ID attribute로 지정하였다.
<textarea id="editor" name="editor"></textarea> <script type="text/javascript"> //<![CDATA[ CKEDITOR.replace('editor'); //]] </script>위 설정 만으로 ckeditor 편집기를 사용할 수 있다.
다른 스킨 사용법
Ckeditor은 기본적으로 3개의 스킨을 제공하고 있다. 다른 스킨을 사용하고자 할 때는 아래처럼 사용하고자 하는 스킨의 경로를 지정하면 된다.
<script type="text/javascript"> //<![CDATA[ CKEDITOR.replace('editor',{ skin:'스킨폴더명'; }); //]]> </script>엔터 모드
엔터나 시프트+엔터를 누를 때의 입력되는 소스를 결정한다.
1 = <p></p>
2 = <br />
3 = <div></div>
<script type="text/javascript"> //<![CDATA[ CKEDITOR.replace('editor',{ enterMode:'2', shiftEnterMode:'3' }); //]] </script>툴바 아이콘 출력지정
툴바에 출력할 아이콘을 설정할 수 있다.
<script type="text/javascript"> //<![CDATA[ CKEDITOR.replace('editor',{ toolbar:[ ['Bold','-', 'Italic'], ['NumberedList']] }); //]] </script>javascript에서 공백 체크
javascript로 입력값이 공백일 때 체크
if(CKEDITOR.instances.content.getData() == '') { window.alert('내용을 입력해 주세요.'); CKEDITOR.instances.content.focus(); return false; }Textarea의 넓이와 높이 지정
Textarea의 넓이와 높이를 지정할 수 있다.
<script type="text/javascript"> //<![CDATA[ CKEDITOR.replace('editor',{ width:'100%', height:'300' }); //]] </script>필자가 적용한 게시판 예 - 툴바 이이콘을 꼭 필요한 것 만 출력 되도록 설정하였다.
이미지 파일업로드 구현
아래와 같이 업로드 된 이미지 파일을 처리할 upload.php를 구현하고 Ckeditor가 설치 된 경로에 업로드한다.
주의 : 파일 이름이 한글이거나 공백이 포함 된 경우 체크하는 부분이 없으므로 실제 사용을 위해서는 추가해 사용하기 바란다.
upload.php
<?php $up_url = '/Board/Db/UPimg'; // 기본 업로드 URL $up_dir = '../Db/UPimg'; // 기본 업로드 폴더 // 업로드 DIALOG 에서 전송된 값 $funcNum = $_GET['CKEditorFuncNum'] ; $CKEditor = $_GET['CKEditor'] ; $langCode = $_GET['langCode'] ; if(isset($_FILES['upload']['tmp_name'])) { $file_name = $_FILES['upload']['name']; $ext = strtolower(substr($file_name, (strrpos($file_name, '.') + 1))); if ('jpg' != $ext && 'jpeg' != $ext && 'gif' != $ext && 'png' != $ext) { echo '이미지만 가능'; return false; } $save_dir = sprintf('%s/%s', $up_dir, $file_name); $save_url = sprintf('%s/%s', $up_url, $file_name); if (move_uploaded_file($_FILES["upload"]["tmp_name"],$save_dir)) echo "<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$save_url', '업로드완료');</script>"; } ?>
<script type="text/javascript"> CKEDITOR.replace('editor',{ filebrowserImageUploadUrl:"경로/ckeditor/upload.php?type=Images" }); </script>
이미지 설정화면에 업로드를 할 수 있는 탭이 추가 되었다.
'Tip & Tech > CSS & HTML' 카테고리의 다른 글
구글 캘린더를 블로그나 웹페이지에 끼워 넣기 (0) | 2011.06.24 |
---|---|
홈페이지를 위한 CSS - 홈페이지에 적용하기 (0) | 2011.04.10 |
홈페이지를 위한 CSS - 기본편 (0) | 2011.04.09 |
wysiwyg web editor Ckeditor 설치 및 설정 (13) | 2011.04.05 |
마우스오버 버튼 만들기 (0) | 2010.06.24 |
아이폰 웹어플리케이션 개발시 꼭 알아야 할 것 (0) | 2010.04.17 |
안녕하세요 포스팅하신대로 다 했는데...파일 업로드가 안되네요..ㅜㅜ
Parse error: syntax error, unexpected $end in /localhost/ckeditor/upload.php on line 30
이런 에러가 나면서 안됩니다..
어떻게 하면될지 조언좀 부탁드려도 될까요?
답글
Parse error: syntax error, unexpected $end in 오류는 } 이걸 제대로 안닫았을 발생합니다.
소스를 볼 수 없어 자세한 건 모르겠지만, 에러나는 부분 바로 아래 } 이걸 하나더 추가해 보세요.
php upload 소스 25번 라인에 script 테그 앞에 닫는 따옴표가 있네요.
답글
앗!! 그렇군요. 소스 수정했습니다. 지적 감사합니다.
좋은정보 퍼갑니다..
답글
비밀댓글입니다
답글
비밀댓글입니다
답글
비밀댓글입니다
답글
비밀댓글입니다
답글
안녕하세요 자바 공백체크가 안되네요ㅠ 내용을 입력안해도 그냥 올라가져요 ㅠ
답글
소스를 보지 않고선 답을 드릴 수 없습니다.
CKEDITOR.instances.content.getData()
content => textarea id 및 name
안녕하세요^^
답글