使用editor_md支援markdown元件以及其中的圖片上傳功能
阿新 • • 發佈：2018-11-25
一、editor.md的下載與安裝
- 下載地址
安裝使用
裡面有多個資料夾，在引入的時候，我們不需要examples示例、docs、tests等資料夾。
引用完畢後目錄：
我也試過指引用css和js檔案，頁面只會顯示大概的內容，但是功能不能使用，如字型圖示，引用圖片上傳等外掛都不可以使用。
二、html頁面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" html部分的程式碼並沒有什麼重要的地方，引入js和css以及定義兩個textarea區域，一個用於編輯，一個隱藏文字域用於構造生成的html程式碼，方便表單提交。
三、js程式碼
<script type="text/javascript">
var testEditor;
$(function() {
testEditor = editormd("test-editormd", {
width : "100%",
height : 640,
syncScrolling : "single",
path : "<%=request.getContextPath()%>/static/editormd/lib/",
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "uploadfile",
saveHTMLToTextarea : true,
});
});
</script>js部分需要注意的是引入lib包和圖片上傳的功能。
引入lib包
引入lib包的時候只是需要注意以下路徑，具體路徑可以和css/js引入時候相同。
../表示父級目錄，
./表示根級目錄圖片上傳功能
- 使用圖片上傳功能首先要設定imageUpload : true。
不設定此屬性，新增圖片中沒有本地上傳的功能。
- imageUploadURL屬性對應後臺接收上傳的圖片位元組碼的處理action。
controller程式碼：
@ResponseBody @RequestMapping(value = "/uploadfile", method = RequestMethod.POST) public JSONObject hello(HttpServletRequest request, HttpServletResponse response, @RequestParam(value = "editormd-image-file", required = false) MultipartFile attach) { JSONObject jsonObject=new JSONObject(); try { request.setCharacterEncoding("utf-8"); response.setHeader("Content-Type", "text/html"); String rootPath = request.getSession().getServletContext().getRealPath("/static/img/blog/"); System.out.println("editormd上傳圖片："+rootPath); /** * 檔案路徑不存在則需要建立檔案路徑 */ File filePath = new File(rootPath); if (!filePath.exists()) { filePath.mkdirs(); } // 最終檔名 File realFile = new File(rootPath + File.separator + attach.getOriginalFilename()); FileUtils.copyInputStreamToFile(attach.getInputStream(), realFile); // 下面response返回的json格式是editor.md所限制的，規範輸出就OK jsonObject.put("success", 1); jsonObject.put("message", "上傳成功"); jsonObject.put("url", "/MyPage/static/img/blog/"+attach.getOriginalFilename()); } catch (Exception e) { jsonObject.put("success", 0); } return jsonObject; }
rootpath是期望在專案的根目錄下希望上傳的圖片存放的位置。
其中需要注意的是後臺傳遞到前臺的路徑，此路徑是用於預覽視窗中找到圖片並顯示的。相當在預覽視窗中有一個<img src="" />標籤，這個路徑要拼接到src中用於定點陣圖片的位置。
在使用editor.md的時候，參考了這篇部落格，他在後臺中的關於傳遞回去的url是這樣定義的：String rootPath = request.getSession().getServletContext().getRealPath("/resources/upload/"); response.getWriter().write( "{\"success\": 1, \"message\":\"上傳成功\",\"url\":\"/resources/upload/" + attach.getOriginalFilename() + "\"}" );我在使用這種方式傳遞url回去的時候遇到了如下錯誤：
- 傳遞回去的json格式的url，
editor.md元件識別不了。後來我改用@responsebody註解，並返回jsonobject的引數，不再報此錯誤。 - 傳遞回去的路徑在控制檯報錯找不到此圖片或者說沒有許可權訪問此圖片。
沒有許可權訪問是因為我修改了路徑，傳遞回去的url=rootpath+"/"+attach.getOriginalFilename().此路徑為圖片在電腦中存放的位置，很明顯在web專案中是不允許這樣訪問的。
找不到圖片的錯誤：http://localhost:8080/static/img/blog路徑找不到，很明顯這個路徑缺少了一個根目錄，我這個專案的根目錄是MyPage。這時候再看後臺程式碼，發現我誤解了參考部落格的意思，以為傳回去的url要和rootpath中定義的路徑保持一致。其實不是這樣，所以在傳回去的url中加了專案的根目錄名，就找到了圖片。
四、成功頁面展示
如果返回的url錯誤，在右邊預覽時看不到圖片的。