CKEDITOR 이미지 업로드 방법
CKEDITOR 이미지 업로드 방법
멀티 업로드 기능이 있으면 정말 완벽할텐데요~
아쉽네요~
아래는 이미지 업로드 하는 방법입니다.
HTML
<script type="text/javascript" src="//cdn.ckeditor.com/4.4.7/full/ckeditor.js"></script>
<script>
$(document).ready(function(){
CKEDITOR.config.width = 600;
CKEDITOR.config.height = 400;
var eObj = CKEDITOR.replace( 'content', { filebrowserUploadUrl: './upload.php', contentsCss:'p{margin:0;}' } );
});
</script>
<textarea name="content"></textarea>
CKEDITOR.replace( 'content', { filebrowserUploadUrl: './upload.php' } ); 이 부분만 있어도 됩니다.
이제 이미지를 서버에 저장할 upload.php 파일이 있어야 합니다.
upload.php
<?
$MAXLIMIT = 10*1024*1024; // 10MByte
if($_FILES['upload']['size'] > $MAXLIMIT) {
echo "<script>alert('이미지 용량이 큽니다.');</script>";
}
else {
$file = $_FILES['upload'];
$name = preg_replace("/\.(php|phtm|htm|cgi|pl|jsp|asp|inc)/i", "$0-x", $file['name']);
$name = Date('YmdHis').'_'.str_replace('%', '', urlencode($name));
$ATTACH_DIR = "./";
$dest_file = $ATTACH_DIR.$name;
$url = $ATTACH_DIR.$name;
if(!is_dir($ATTACH_DIR)) {
if(@mkdir($ATTACH_DIR, 0777, true)) {
if(is_dir($ATTACH_DIR)) {
@chmod($ATTACH_DIR, 0777);
}
}
}
if(move_uploaded_file($file['tmp_name'], $dest_file)) {
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction('".$_GET['CKEditorFuncNum']."', '".$url."', 'success')</script>";
}
else {
echo "<script>alert('failed')</script>";
}
}
?>
이미지 파일을 서버에 저장하고 url 경로를 넘겨주는 코드입니다.
이미지가 업로드 되었으면 html 부분에서 컨텐츠 내용을 저장하는 단계로 넘어가면 됩니다.