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 부분에서 컨텐츠 내용을 저장하는 단계로 넘어가면 됩니다.