ckeditor4 이미지 업로드가 안 돼요! "잘못된 서버 응답"
본문
그누보드 5.4 버전, CKEditor 4는 4.16버전을 설치했습니다.
https://sir.kr/g5_plugin/2907 을 보고 따라했는데, 이미지 업로드가 안 돼서 문의합니다.
위 링크처럼 editor.lib.php와 imageUpload.zip도 설치했습니다.
config.js에도
CKEDITOR.editorConfig = function( config ) {
config.filebrowserUploadUrl = g5_editor_url+"/imageUpload/upload.php";
};
와 같이 코드 추가도 했습니다.
그런데 업로드가 안 돼서 찾아보니
혹시 json타입으로 콜을 받아야 하시는 분들 이 이상 진행 안된다면
ckeditor.js 의 "\x26responseType" 를 "?\x26responseType" 로,
upload.php 파일의 마지막 2줄을 아래와 같이 바꿔주세요~!
//echo "<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$save_url', '업로드완료');</script>";
$json = array(
"uploaded"=> 1
,"fileName"=> basename($save_url)
,"url"=> $save_url);
echo json_encode($json);
라는 말이 있어서 그대로 했는데,
이미지를 올리면 "잘못된 서버 응답"이라고 뜨면서 업로드가 안 됩니다.
페이지 소스를 보면
img alt="" src="blob:http://www.xxxxx.com/5c508c24-f962-40c4-b3f6-36fa99087e1f"
으로 되어 있습니다.
그런데 웃긴건, 쓰기 페이지에서는 분명히 이미지가 보이고, 저장하고 나면 사라진다는 것입니다.
<질문>
1. 추가로 뭔가를 더 해야 할 것이 있나요? 혹시 참고할 링크나 조언이 있으시다면 부탁드립니다.
2. 페이지 소스에서 blob:는 뭔가요? blob:http: 이렇게 되는 것이 맞는 건가요?
<추신>
어떤 검색에서는 이미지 첨부 버튼을 클릭하면 업로드 새창이 뜬다고 하는데, https://sir.kr/g5_plugin/2907 대로 하니까 Sir에서 처럼 이미지가 바로 나타납니다. (저장하고 나면 사라져서 문제지만...)
고수님들! 좀 도와주세요~~
답변 2
<?php
include_once("_common.php");
if(strpos($config['cf_editor'], 'ckeditor') === false ){
exit;
}
// ---------------------------------------------------------------------------
# 이미지가 저장될 디렉토리의 전체 경로를 설정합니다.
# 끝에 슬래쉬(/)는 붙이지 않습니다.
# 주의: 이 경로의 접근 권한은 쓰기, 읽기가 가능하도록 설정해 주십시오.
# data/editor 디렉토리가 없는 경우가 있을수 있으므로 디렉토리를 생성하는 코드를 추가함. kagla 140305
@mkdir(G5_DATA_PATH.'/'.G5_EDITOR_DIR, G5_DIR_PERMISSION);
@chmod(G5_DATA_PATH.'/'.G5_EDITOR_DIR, G5_DIR_PERMISSION);
$ym = date('ym', G5_SERVER_TIME);
$savefile = G5_DATA_PATH.'/'.G5_EDITOR_DIR.'/'.$ym;
$save_url = G5_DATA_URL.'/'.G5_EDITOR_DIR.'/'.$ym;
define("SAVE_DIR", $savefile);
@mkdir(SAVE_DIR, G5_DIR_PERMISSION);
@chmod(SAVE_DIR, G5_DIR_PERMISSION);
# 위에서 설정한 'SAVE_DIR'의 URL을 설정합니다.
# 끝에 슬래쉬(/)는 붙이지 않습니다.
define("SAVE_URL", $save_url);
function cke_get_user_id ()
{
@session_start();
return session_id();
}
function cke_get_file_passname ()
{
$tmp_name = cke_get_user_id().$_SERVER['REMOTE_ADDR'];
$tmp_name = md5(sha1($tmp_name));
return $tmp_name;
}
function cke_generateRandomString ($length = 4)
{
$characters = '0123456789abcdefghijklmnopqrstuvwxyz';
$charactersLength = strlen($characters);
$randomString = '';
for ($i = 0; $i < $length; $i++) {
$randomString .= $characters[rand(0, $charactersLength - 1)];
}
return $randomString;
}
function cke_replace_filename ($filename)
{
$ext = pathinfo($filename, PATHINFO_EXTENSION);
$random_str = cke_generateRandomString(4);
$passname = cke_get_file_passname();
$file_arr = date("YmdHis", time());
return $file_arr.'_'.$passname.'_'.$random_str.'.'.$ext;
}
// 업로드 DIALOG 에서 전송된 값
$funcNum = $_GET['CKEditorFuncNum'];
$CKEditor = $_GET['CKEditor'];
$langCode = $_GET['langCode'];
$tempfile = $_FILES['upload']['tmp_name'];
$filename = $_FILES['upload']['name'];
$type = substr($filename, strrpos($filename, ".")+1);
$found = false;
switch ($type) {
case "jpg":
case "jpeg":
case "gif":
case "png":
case "bmp":
case "webp":
$found = true;
}
if ($found != true) {
exit;
}
// 저장 파일 이름: 년월일시분초_렌덤문자
// 20140327125959_abcdefghi.jpg
$filename = cke_replace_filename($filename);
$savefile = SAVE_DIR . '/' . $filename;
$save_url = SAVE_URL . '/' . $filename;
move_uploaded_file($tempfile, $savefile);
$imgsize = getimagesize($savefile);
$filesize = filesize($savefile);
if (!$imgsize) {
$filesize = 4048576;
$random_name = '-ERR';
unlink($savefile);
};
try {
if(defined('G5_FILE_PERMISSION')) chmod($savefile, G5_FILE_PERMISSION);
} catch (Exception $e) {
}
//echo "<script>window.parent.CKEDITOR.tools.callFunction($funcNum, $save_url, '업로드완료');</script>";
$json = array(
"uploaded"=> 1
,"fileName"=> basename($save_url)
,"url"=> $save_url);
echo json_encode($json);
?>
/plugin/editor/ckeditor_full/imageUpload 안의
upload.php 전체 소스 입니다.
저도 안되서 고민이 많았었는데..
그냥 단순 경로의 문제 였어요.
그누보드 플러그인 자료에
ckeditor 풀버전 및 cms 버전으로 테스트
했습니다.
지금도 잘 쓰고 있습니다.
필요하시면 그대로 가져다 쓰세요~~
아마 가지고 계신 upload.php 파일과 비교해 보시면
아하! 하실 겁니다. ^^
앗~~ 감사합니다.
친절하고 상세하고... 정말 큰 도움이 될 거 같습니다.
마음 좋으신 분!
비교해서 적용해 보겠습니다. 다시 한번 더 감사합니다!!
ㅋㅋㅋ 제꺼 글을 보셨나보군요~ 일단 제가 힌트를 드리자면 경로를 확인해보세요 경로에 폴더가 담겨지지 않는것 같아요
어제 오늘 계속 경로 수정을 테스트해보고 있는데, 어디서 바꿔야 되는지 알 수가 없네요.
어디에서 바꿔야 하는지요? 코드를 좀 봐 주시겠어요?
config.js에서는 이렇게 되어 있습니다.
CKEDITOR.editorConfig = function( config ) {
config.allowedContent = true;
config.height = 300;
config.removeButtons = '';
config.filebrowserUploadUrl = g5_editor_url+"/imageUpload/upload.php";
};
editor.lib.php에서는 이렇게 되어 있구요.
function editor_html($id, $content, $is_dhtml_editor=true)
{
global $g5, $config, $w, $board;
static $js = true;
if( $is_dhtml_editor && $content && !$w && (isset($board['bo_insert_content']) && !empty($board['bo_insert_content']) ) ){ //글쓰기 기본 내용 처리
if( preg_match('/\r|\n/', $content) && $content === strip_tags($content, '<a><strong><b>') ) { //textarea로 작성되고, html 내용이 없다면
$content = nl2br($content);
}
}
$editor_url = G5_EDITOR_URL.'/ckeditor';
$html = "";
$html .= "<span class=\"sound_only\">웹에디터 시작</span>";
if ($is_dhtml_editor && $js) {
$html .= "\n".'<script src="'.$editor_url.'/ckeditor.js"></script>';
$html .= "\n".'<script>var g5_editor_url = "'.$editor_url.'";</script>';
$html .= "\n".'<script src="'.$editor_url.'/config.js"></script>';
$js = false;
}
$ckeditor_class = $is_dhtml_editor ? "ckeditor" : "";
$html .= "\n<textarea id=\"$id\" name=\"$id\" class=\"$ckeditor_class\" maxlength=\"65536\">$content</textarea>";
$html .= "\n<span class=\"sound_only\">웹 에디터 끝</span>";
return $html;
}
upload.php에서는 이렇게 형식을 바꾸었습니다. json 형식으로 바뀌었다고 해서요....
echo' {"filename" : "'.$filename.'", "uploaded" : 1, "url":"'.$save_url.'"}';
upload.php에서 이렇게도 해 봤는데 안 되네요...ㅠㅠ
$json = array("uploaded"=>"1", "fileName"=>"$filename", "url"=>"$save_url");
echo json_encode($json);
어디를 수정해야 할까요?
단순합니다 업로드 할때 업로드 함수가 빠졌어요 그누 bbs/write_update.php 여기 보면 있거든요 그거 뜯어서 붙이기만하면되요 위에 업로드 로직을 넣으시고 내부에는 move_uploaded_file 이걸로 if 조건문 감싸서 위에
echo json_encode($json); 이걸 내부에 넣으면되요
저는 어디까지나 힌트만 드린거라서.. (제가 엄청 힘들게 해서 해결 했거든요.. 답변 알려주신분이 없어서 겨우야 혼자서 해결 했어요,, 이해 좀..)
