[PHP] CKEditor 연동, 이미지 업로드

ckeditor.com/ckeditor-4/download/

CKEditor 4 - Download

위 페이지에서 zip 파일 다운로드 후 압축 풀어서 서버에 업로드

 

---

 

[에디터 사용할 파일]

<textarea name="content" id="content"></textarea>

<script type="text/javascript" src="/static/plugin/ckeditor/ckeditor.js"></script>
<script>
$(function() {
	// ""에 textarea id값을 넣어줌
    // 아래 코드에서 'textarea_id' 는 textarea id값임
	CKEDITOR.replace("textarea_id");
    
    $("#submit_btn").on("click", function(evt){
        evt.preventDefault();
		
        // submit 처리 시 입력되어있는지 체크
        if (!CKEDITOR.instances.textarea_id.getData()) {
            alert("내용을 입력해주세요.");
            return false;
        }
		
        // 에디터에 입력된 값을 실제 textarea에 넣어줌
        CKEDITOR.instances.textarea_id.updateElement();

        $("#write_frm").submit();
    });

});
</script>

 

 

[config.js] (CKEditor 다운로드 시 함께 구성되어있는 파일임)

CKEDITOR.editorConfig = function( config ) {

  ...(생략)

  // Simplify the dialog windows.
  // 삭제할 dialog 기술
  config.removeDialogTabs = 'image:Link;image:advanced;link:advanced';

  config.height = 400; // 높이 지정
  config.toolbarCanCollapse = true; // 툴바 숨기기/펼치기
  config.filebrowserUploadUrl = '/static/plugin/ckeditor/file_upload.php'; // 업로드가 이뤄지는 php 파일
};

CKEDITOR.on( 'dialogDefinition', function( ev ){
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;
  var dialog = ev.data.definition.dialog;

  if ( dialogName == 'image' ){
    dialog.on('show', function (obj) {
    	this.selectPage('Upload'); // 업로드 탭으로 시작되도록 함
    });

    var infoTab = dialogDefinition.getContents( 'info' ); //info탭을 제거하면 이미지 업로드가 안된다.
    // info 탭 내에 불필요한 엘레멘트들 제거
    //infoTab.remove('txtAlt');    // 대체 문자열
    infoTab.remove('txtHSpace'); // 세로 여백
    infoTab.remove('txtVSpace'); // 가로 여백
    infoTab.remove('txtBorder'); // 테두리
    //infoTab.remove('txtWidth');  // 너비
    //infoTab.remove('txtHeight'); // 높이
    //infoTab.remove('ratioLock'); // 비율유지
    infoTab.remove('cmbAlign');  // 정렬
  }
});

config.filebrowserUploadUrl 지정해줘야

이미지를 업로드 할 수 있는 업로드 탭이 노출 됨

 

 

[file_upload.php]

<?php
include_once ($_SERVER['DOCUMENT_ROOT'].'/inc/function.php');
error_reporting(E_ALL ^ E_NOTICE);

try {
    $permit_size = 10485760; // 10MB
    $permit_exts = array('jpg','jpeg','png');

    $doc_root = $_SERVER['DOCUMENT_ROOT'];

    // 기본이미지
    $default_dir = '/uploads/ckeditor/'.date('Ymd').'/';
    $upload_dir = $doc_root.$default_dir;

    if (!is_dir($upload_dir)) mkdir($upload_dir, 0707);
    
    $files = $_FILES['upload'];
    if ($files['tmp_name']) {

        $tmp_name = $tmp_file = array();
        $exp_name = pathinfo($files['name']);

        $tmp_file['name'] = preg_replace('/\s+/', '', strtolower($exp_name['filename']));
        $tmp_file['ext'] = strtolower($exp_name['extension']);
        $tmp_file['size'] = $files['size'];

        $upload_name = uniqid().'_'.time() .'.'.$tmp_file['ext'];
        if (is_file($upload_dir.$upload_name)) {
            while (!is_file($upload_dir.$upload_name)) {
                $upload_name = uniqid().'_'.time() .'.'.$tmp_file['ext'];
            }
        }

        if (!in_array($tmp_file['ext'], $permit_exts)) throw new Exception('이미지 파일만 첨부 할 수 있습니다.('.(implode(', ', $permit_exts)).')');
        //if ($tmp_file['size'] > $permit_size) throw new Exception('10MB 이상 파일은 업로드할 수 없습니다.');

        $data = array(
            'ori_name'    => $tmp_file['name'].'.'.$tmp_file['ext'],
            'tmp_name'    => $files['tmp_name'],
            'up_name'     => $upload_name,
            'error'       => $files['error'],
            'size'        => $files['size'],
            'path'        => $default_dir,
            'type'        => $files['type'],
            'img'         => $default_dir.$upload_name,
            'my_thumb_id' => explode('.',$upload_name)[0],
        );
        
        // 원본
        move_uploaded_file($data['tmp_name'], $upload_dir.$data['up_name']);
        
        echo '{"filename" : "'.$data['up_name'].'", "uploaded" : 1, "url":"'.$default_dir.$data['up_name'].'"}';
    } else throw new Exception('업로드된 파일이 없습니다.');

    
} catch (Exception $e) {
    echo '{"uploaded": 0, "error": {"message": "'.$e->getMessage().'"}}';
}

파일 정보는 $_FILES['upload']로 넘어옴

처리 후 JSON 형태의 데이터를 출력해주면 됨

 

업로드 성공 시

→ {"filename" : "파일명", "uploaded" : 1, "url":"파일경로"}

업로드 실패 시

→ {"uploaded" : 0, "url":"파일경로""error": {"message": "에러 메세지"}}