配置文件:
CKEDITOR.editorConfig = function( config ) { // 配置ckeditor的默認語言 config.language = 'zh-cn'; // 編輯器樣式 config.skin = 'v2'; // 設置工具欄 config.toolbar_Full = [ [ 'Source', '-', 'Save', 'Preview', ], [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-','Print', 'SpellChecker', 'Scayt' ], [ 'Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll','RemoveFormat' ], '/', [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript','Superscript' ], [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent' ], [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ], [ 'Link', 'Unlink', 'Anchor' ], [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak' ], '/', [ 'Styles', 'Format', 'Font', 'FontSize' ], [ 'TextColor', 'BGColor' ] ]; // 設置快捷鍵 config.keystrokes = [ [ CKEDITOR.ALT + 121, 'toolbarFocus' ], // 獲取焦點 [ CKEDITOR.ALT + 122, 'elementsPathFocus' ], // 元素焦點 [ CKEDITOR.SHIFT + 121, 'contextMenu' ], // 文本菜單 [ CKEDITOR.CTRL + 90, 'undo' ],// 撤銷 [ CKEDITOR.CTRL + 89, 'redo' ], // 重做 [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90, 'redo' ], [ CKEDITOR.CTRL + 76, 'link' ],// 鏈接 [ CKEDITOR.CTRL + 66, 'bold' ],// 粗體 [ CKEDITOR.CTRL + 73, 'italic' ], // 斜體 [ CKEDITOR.CTRL + 85, 'underline' ], // 下划線 [ CKEDITOR.ALT + 109, 'toolbarCollapse' ] ] // 設置默認字體 config.font_defaultLabel = 'Arial'; // 設置字體種類 config.font_names = 'Arial;黑體;宋體;仿宋;GB_2312'; // 換行方式 config.enterMode = CKEDITOR.ENTER_BR; // 當輸入:shift+Enter是插入的標簽 config.shiftEnterMode = CKEDITOR.ENTER_BR; //請求路徑: //config.baseHref = 'http://localhost:8080/ckps/'; // 配置文件上傳和顯示路徑 config.filebrowserBrowseUrl = 'servlet/BrowerUpload'; config.filebrowserUploadUrl = 'servlet/CKEditorUpload'; config.filebrowserImageUploadUrl = 'servlet/CKEditorUpload?type=Images'; config.filebrowserFlashUploadUrl = 'servlet/CKEditorUpload?type=Flashs'; config.filebrowserImageBrowseUrl = 'servlet/BrowerUpload?type=Images'; config.filebrowserFlashBrowseUrl = 'servlet/BrowerUpload?type=Flashs'; };
java的我們用servlet來進行文件上傳的實現,其實網上已經有普通用的版本了,但是,總是多少有路徑的限制問題,我自己研究了一早上,終於攻克了這個讓人惡心的問題。我的博客里有3篇CKEditor的配置和應用的文章,那個是從別人的博文里拷貝的。起初寫了個小demo,測試了下,可以用。上傳功能用的是的jsp實現。我一般這些東西都會換着路徑來測試可否正常使用的。果然,我新建了文件夾,放到非根目錄,就有了路徑問題了,無法實現任意路徑的正常上傳了。然后我繼續網上查資料,發現有用servlet實現的。就參考了下,果然。還是根目錄可以,非根目錄還是不行。細節就不多說了。我的解決方法是用的servlet,因為servlet的路徑可以配置成擴展模式,可以方便非根路徑的映射。下面就是代碼展示了:
前端:
<body> <div style="width:671px;"> <form action="<%=path %>/UploadA" method="post"> <textarea cols="80" id="content" name="content"></textarea> <script type="text/javascript"> CKEDITOR.replace('content',{ filebrowserImageBrowseUrl : 'servlet/BrowerUpload.brower', filebrowserImageUploadUrl:'servlet/CKEditorUpload.upload'}); </script> <input type="submit" value="提交"/> </form> </div> </body>
web.xml
<servlet> <servlet-name>CKEditorUpload</servlet-name> <servlet-class>com.xxx.util.CKEditorUpload</servlet-class> </servlet> <servlet> <servlet-name>BrowerUpload</servlet-name> <servlet-class>com.xxx.util.BrowerUpload</servlet-class> </servlet> <servlet-mapping> <servlet-name>CKEditorUpload</servlet-name> <url-pattern>*.upload</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>BrowerUpload</servlet-name> <url-pattern>*.brower</url-pattern> </servlet-mapping>
后台:上傳的servlet:com.xxx.util.CKEditorUpload
package com.xxx.util; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Iterator; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; public class CKEditorUpload extends HttpServlet { private static final long serialVersionUID = -7339187468470294712L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd-ss"); request.setCharacterEncoding("utf-8"); response.setContentType("text/html; charset=UTF-8"); response.setHeader("Cache-Control", "no-cache"); PrintWriter out = response.getWriter(); //判斷提交的請求是否包含文件 boolean isMultipart = ServletFileUpload.isMultipartContent(request); //設置上傳的保存路徑 String uploadDir = getServletContext().getRealPath("/upload"); if (uploadDir == null) { System.out.println("無法訪問存儲目錄"); return; } File fUploadDir = new File(uploadDir); if(!fUploadDir.exists()) { if(!fUploadDir.mkdir()) { System.out.println("無法創建存儲目錄!"); return; } } Date date = new Date(); String dsr = sdf.format(date); File dirfile = new File(fUploadDir,dsr); if(!dirfile.exists()){ if(!dirfile.mkdir()){ System.out.println("無法創建存儲路徑"); return; } } DiskFileItemFactory factory = new DiskFileItemFactory(); //設置內存中最大存儲5M,超過則保存到臨時文件夾下 factory.setSizeThreshold(1024*1024*5); //設置臨時文件夾地址 factory.setRepository(new File("/")); ServletFileUpload upload = new ServletFileUpload(factory); //設置最大上傳的文件大小 3M upload.setSizeMax(1024*1024*3); String fileName = ""; for(int k =0;k<100;k++){ if(k==50){ continue; } } List<FileItem> items = null; try { items = upload.parseRequest(request); } catch (FileUploadException e1) { e1.printStackTrace(); } Iterator<FileItem> iter = items.iterator(); while(iter.hasNext()){ FileItem item = iter.next(); if(item.isFormField()){ System.out.println("不是上傳的文件"); }else{ String[] strs = item.getName().split("\\."); fileName = sdf.format(date)+Math.random()*30+"."+strs[strs.length-1]; File nFile = new File(dirfile,fileName); try { item.write(nFile); } catch (Exception e) { e.printStackTrace(); } } } String uri = request.getRequestURI(); String fileUrl = uri.substring(0,uri.indexOf("ckp")+4)+"upload/"+dsr+"/"+fileName; //CKEditorFuncNum就是在提交上傳文件的同時傳遞到后台的request內容,表明應該插入到編輯器中的位置 String callback = request.getParameter("CKEditorFuncNum"); out.println("<script type=\"text/javascript\">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + fileUrl + "',''" + ")"); out.println("</script>"); out.flush(); out.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
后台:瀏覽的servlet:com.xxx.util.BrowerUpload
package com.xxx.util; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class BrowerUpload extends HttpServlet { private static final long serialVersionUID = 7132717169084340320L; public BrowerUpload() { super(); } public void destroy() { super.destroy(); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String callback = request.getParameter("CKEditorFuncNum"); System.out.println(callback); response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<script type='text/javascript'>"); out.println("function tt(obj){"); out.println("window.opener.CKEDITOR.tools.callFunction("+callback+",obj)"); out.println("window.close();"); out.println("}"); out.println("</script>"); String uploadDir = getServletContext().getRealPath("/upload"); File file = new File(uploadDir); if(!file.exists()){ file.mkdir(); } File[] files = file.listFiles(); for(File f:files){ if(f.isDirectory()){ out.print(f.getName()); File[] filesc = f.listFiles(); for(File fc: filesc){ out.print("<div onclick =tt('"+"upload/"+f.getName()+"/"+fc.getName()+"','')>"); out.print("upload/"+f.getName()+"/"+fc.getName()); out.print("</div>"); } } } out.flush(); out.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
這樣就可以了。前端代碼可以寫在任何路徑下。只要servlet的匹配模式寫正確就沒有問題了。