Editor.md的安装使用(MarkDown)
生活随笔
收集整理的這篇文章主要介紹了
Editor.md的安装使用(MarkDown)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、官網下載：http://pandao.github.io/editor.md/
2、使用例子：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>添加編輯廣告圖</title>
<link rel="stylesheet" type="text/css" href="../../css/editormd.css">
<script type="text/javascript" src="../../js/editormd.min.js"></script>
<div class="editormd" id="test-editormd">
<textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc"></textarea>
<!-- 第二個隱藏文本域，用來構造生成的HTML代碼，方便表單POST提交，這里的name可以任意取，后臺接受時以這個name鍵為準 -->
<textarea class="editormd-html-textarea" name="text"></textarea>
</div>
</body>
</html>
$(function() {
editormd("test-editormd", {
width : "90%",
height : 640,
syncScrolling : "single",
//你的lib目錄的路徑，
path : "../../../statics/lib/",
//這個配置在simple.html中并沒有，但是為了能夠提交表單，使用這個配置可以讓構造出來的HTML代碼直接在第二個隱藏的textarea域中，方便post提交表單。
saveHTMLToTextarea : true,
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/upload/image",
});
});
java 上傳后臺代碼：
package com.bbkj.admin.upload.controller;
import org.apache.commons.io.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
/**
* Created by Administrator on 2016/12/23.
*/
@Controller
@RequestMapping("/upload")
public class UploadController {
@RequestMapping(value="/image",method= RequestMethod.POST)
public void hello(HttpServletRequest request, HttpServletResponse response,
@RequestParam(value = "editormd-image-file", required = false) MultipartFile attach) {
try {
request.setCharacterEncoding("utf-8");
response.setHeader("Content-Type", "text/html");
String rootPath = request.getSession().getServletContext().getRealPath("/upload/editor/");
/**
* 文件路徑不存在則需要創建文件路徑
*/
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
response.getWriter().write("{"success": 1, "message":"上傳成功","url":"/upload/editor/" + attach.getOriginalFilename() + ""}");
} catch (Exception e) {
try {
response.getWriter().write("{"success":0}");
} catch (IOException e1) {
e1.printStackTrace();
}
}
}
}
最后效果：
總結
以上是生活随笔為你收集整理的Editor.md的安装使用(MarkDown)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 对Flutter路由管理库Fluro的封
- 下一篇： node使用npm一句命令停止某个端口号