CKEditor 4 여러 파일 업로드(JQuery 필요) 플러그인

CK Editor 4 파일 업로드 plugin

아이콘(png) 파일 : /ckeditor/4.5.2/plugins/fileupload/icons/fileupload.png

---

플러그인(js) 경로 : /ckeditor/4.5.2/plugins/fileupload/plugin.js

// plugin.js 파일 소스
CKEDITOR.plugins.add('fileupload', {
    icons: 'fileupload',
    init: function (editor) {
        editor.addCommand('FileUpload', {
            exec: function (editor) {
                var x = document.createElement("INPUT");
                x.setAttribute("type", "file");
                x.setAttribute("name", "file");
                x.setAttribute("multiple", "multiple"); // 여러파일 가능하도록 속성 처리
                x.setAttribute("id", "ckfile");
                x.setAttribute("style", "display:none;");

                if($("#ckfile").length==0)
                    $("body").append(x);
                
                $("#ckfile").on("change",function(){
                    var ofw = $("body").css("overflow");
                    var html = [];
                    var formData = new FormData();
                    for (var i = 0; i < x.files.length; i++) {
                        formData.append("fileObj"+i, x.files[i]);
                    }
                    $.ajax({
                        url: '/upload/',
                        data: formData,
                        type: 'POST',
                        processData: false,
                        contentType: false,
                        beforeSend: function () {
                            $("body").css("overflow", "hidden");
                            $("body").append("<ul id=\"editorLoadingBar\" class=\"LoadingBar\"><li><div class=\"loader\">Loading...</div></li></ul>");
                        },
                        success: function (data) {
                            var txt = data.replace(/<(\/script|script)([^>]*)>/gi, "");
                            if (txt.indexOf("업로드성공") == -1) {
                                alert("파일을 업로드 하는데 실패하였습니다.");
                                return;
                            }
                            var patten1 = /\(.+?\)/g;
                            var txtString = txt.match(patten1)[0].replace(/\(/gi, '[').replace(/\)/gi, ']').replace(/\'/gi, '"');
                            var arr = JSON.parse(txtString);
                            if (arr.length == 4) {
                                var fileArr1 = arr[1].split(",");
                                var fileArr2 = arr[3].split(",");
                                if (fileArr1.length == fileArr2.length) {
                                    for (var i = 0; i < fileArr1.length; i++) {
                                        var src = fileArr1[i];
                                        var dot = src.lastIndexOf('.');
                                        var ext = src.substring(dot + 1, src.length).toLowerCase();;
                                        if (("jpg|jpeg|png|gif|bmp").indexOf(ext) > -1) {
                                            html.push("<img src=\"" + src + "\" alt=\""+fileArr2[i]+"\" /><br/>");
                                        } else if (("mp4").indexOf(ext) > -1) {
                                            html.push("<video controls=\"controls\" src=\"" + src + "\" type=\"video/mp4\"> </video><br/>");
                                        } else if (("mp3").indexOf(ext) > -1) {
                                            html.push("<audio controls=\"controls\" src=\"" + src + "\"></audio><br/>");
                                        } else if (("zip|pdf|hwp|doc|docx|xls|xlsx|ppt|pptx|psd").indexOf(ext) > -1) {
                                            html.push("<a href=\"/download/?path=" + escape(src).replace(/\+/gi, '%2B')
                                                + "&name=" + escape(fileArr2[i]).replace(/\+/gi, '%2B') + "\" target=\"_blank\">" + fileArr2[i] + "</a><br/>");
                                        }
                                    }
                                }
                            }
                        }, complete: function () {
                            $("body").css("overflow", ofw);
                            $("#editorLoadingBar").remove();
                            editor.insertHtml(html.join(''));
                        }
                    });
                });
                $("#ckfile").click();
            }
        });
        editor.ui.addButton('FileUpload', {
            label: '파일첨부',
            command: 'FileUpload',
            toolbar: 'insert'
        });
    }
});

---

업로드되는 파일 처리 : /upload/

단일 파일

<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('', '/파일경로/파일명', '업로드성공','파일명');</script>

3개파일의 경우

<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('', '/저장경로/저장명1,/저장경로/저장명2,/저장경로/저장명3', '업로드성공','파일명1,파일명2,파일명3,');</script>

---

설정(js) 파일 : /ckeditor/4.5.2/config.js

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = "fileupload"; // 플러그인이 하나일 경우
    //config.extraPlugins = "youtube,fileupload"; // 플러그인이 여러개일 경우
}