설치법
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 |
| 마우스오버 버튼 만들기 (0) | 2010.06.24 |
| 아이폰 웹어플리케이션 개발시 꼭 알아야 할 것 (0) | 2010.04.17 |
댓글