fckEditor的使用以及圖片上傳不顯示解決
阿新 • • 發佈：2019-01-06
寫過部落格的都是 在寫部落格的textarea 上面有一些按鈕 類似 word 工具欄 他們其實就是xhEditor.網頁編輯器。今天記錄的也是一種網頁編輯器。就是FCkEditor。使用他需要準備前端FckEditor外掛包。可以在官網下載https://ckeditor.com/ 還有就是java-core2.6.jar . 將他們引入工程裡。
前端程式碼如下：
這裡說明一下 ：我的jquery-1.12.4.js js的核心 其實已經引入了。這個頁面是ajax 區域性重新整理的 所以沒有再次引用。假如只是新的頁面的話需要核心js 引入。配置檔案資訊可以<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="ctx" value="${pageContext.request.contextPath }"></c:set> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="${ctx}/fckeditor/fckeditor.js"></script> <script type="text/javascript"> $(function(){ var fck=new FCKeditor("mytext"); //設定根目錄 var path="${pageContext.request.contextPath }"; fck.BasePath=path+"/fckeditor/"; fck.Height=400; fck.Config["ImageUploadURL"]=path+"/edit/uploadForFck"; //渲染到textarea fck.ReplaceTextarea(); }); </script> </head> <body> <textarea id="mytext"></textarea> </body> </html>
到fckeditor/fckconfig.js 中檢視 在頁面js中修改。
注意二：我的fckeditor 放在webapp 下，其他頁面使用他的話 使用
pageContext.request.contextPath 加上+檔案路勁 （絕對路徑） 這樣可以無論你的使用頁面在哪裡 都可以找到引用的檔案。
重點：通過查閱資料發現要實現上傳的話需要修改這是自己上傳路徑。經過測試發現圖片不顯示。火狐瀏覽器沒有報錯。於是在IE測試發現圖片報資源找不到。原來是因為我上傳到本地的D:/upoload 瀏覽器網站不允許直接去盤裡直接訪問fck.Config["ImageUploadURL"]=path+"/edit/uploadForFck";
所以自己需要修改路徑 也就是在tomcat 配置虛擬路徑。如下： <Context debug="0" docBase="D:\" path="/file" reloadable="true"/> 這樣在java 上傳到本地後 fck需要回顯的話路徑寫虛擬路徑。
Java 上傳程式碼：
@RequestMapping("/uploadForFck") public void uploadForFck(HttpServletRequest request, PrintWriter out) throws IOException{ //強制轉換request MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request; //獲得檔案 Iterator<String> iter = mr.getFileNames(); String fileInputName = iter.next(); MultipartFile mf = mr.getFile(fileInputName); //獲得檔案的位元組陣列 byte[] byteArr = mf.getBytes(); String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()); Random random = new Random(); for(int i = 0 ; i < 3; i++){ fileName = fileName + random.nextInt(10); } //獲得原始檔名 String oriFileName = mf.getOriginalFilename(); String suffix = oriFileName.substring(oriFileName.lastIndexOf(".")); //獲得上傳檔案的絕對路徑 String realPath = "D:/"+fileName + suffix; String path="/file/"+fileName + suffix; FileCopyUtils.copy(byteArr, new FileOutputStream(new File(realPath))); //建立fck的上傳的響應物件 UploadResponse ur = UploadResponse.getOK(path); out.print(ur); }