아이콘(png) 파일 : /ckeditor/4.5.2/plugins/fileupload/icons/fileupload.png
플러그인(js) 경로 : /ckeditor/4.5.2/plugins/fileupload/plugin.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | // 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]+"\" />"); } else if (("mp4").indexOf(ext) > -1) { html.push("<video controls=\"controls\" src=\"" + src + "\" type=\"video/mp4\"> </video>"); } else if (("mp3").indexOf(ext) > -1) { html.push("<audio controls=\"controls\" src=\"" + src + "\"></audio>"); } 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>"); } } } } }, complete: function () { $("body").css("overflow", ofw); $("#editorLoadingBar").remove(); editor.insertHtml(html.join('')); } }); }); $("#ckfile").click(); } }); editor.ui.addButton('FileUpload', { label: '파일첨부', command: 'FileUpload', toolbar: 'insert' }); }}); |
업로드되는 파일 처리 : /upload/
단일 파일
1 | <script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('', '/파일경로/파일명', '업로드성공','파일명');</script> |
3개파일의 경우
1 | <script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('', '/저장경로/저장명1,/저장경로/저장명2,/저장경로/저장명3', '업로드성공','파일명1,파일명2,파일명3,');</script> |
설정(js) 파일 : /ckeditor/4.5.2/config.js
1 2 3 4 | CKEDITOR.editorConfig = function( config ) { config.extraPlugins = "fileupload"; // 플러그인이 하나일 경우 //config.extraPlugins = "youtube,fileupload"; // 플러그인이 여러개일 경우} |
