Editor.md 的使用
1. 從官網(wǎng)下載相應(yīng)的組件
editorMd.PNG
2. 在頁(yè)面中使用
<div id="my-editormd">
<textarea class="editormd-markdown-textarea" name="doc"
style="display:none;"></textarea>
<!-- 第二個(gè)隱藏文本域，用來(lái)構(gòu)造生成的HTML代碼，方便表單POST提交，這里的name可以任意取，后臺(tái)接受時(shí)以這個(gè)name鍵為準(zhǔn) -->
<textarea class="editormd-html-textarea" name="html"></textarea>
</div>
<script type="text/javascript">
var testEditor;
$(function () {
testEditor = editormd("my-editormd", {
width: "90%",
height: 640,
syncScrolling: "single",
path: "../lib/",
//這個(gè)配置在simple.html中并沒(méi)有，但是為了能夠提交表單，使用這個(gè)配置可以讓構(gòu)造出來(lái)的HTML代碼直接在第二個(gè)隱藏的textarea域中，方便post提交表單。
saveHTMLToTextarea: true,
imageUpload: true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/uploadImage",//注意你后端的上傳圖片服務(wù)地址
onload: function(){
this.width("100%");
this.height(480);
}
});
});
</script>
var content = $('.editormd-markdown-textarea').val(); 獲取值
- 后端接受圖片
//發(fā)布項(xiàng)目后改為項(xiàng)目地址
private static String UPLOADED_FOLDER = "F:\\ideaTest\\gakki\\src\\main\\webapp\\image\\";
@RequestMapping("/uploadimg")
public Map<String, Object> editormdPic(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file, HttpServletRequest request) throws Exception {
Map<String, Object> resultMap = new HashMap<>();
String fileName = file.getOriginalFilename();// 獲取文件名
String suffixName = fileName.substring(fileName.lastIndexOf("."));// 獲取文件的后綴
String newFileName = DateUtil.getCurrentDateStr() + suffixName;
try {
FileUtils.copyInputStreamToFile(file.getInputStream(),
new File(UPLOADED_FOLDER + newFileName));
resultMap.put("success", 1);
resultMap.put("message", "上傳成功！");
resultMap.put("url", "http://localhost:8888/image/" + newFileName);
} catch (Exception e) {
resultMap.put("success", 0);
resultMap.put("message", "上傳失敗！");
e.printStackTrace();
}
return resultMap;
}
前段顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>md</title>
<link rel="stylesheet" href="editormd.preview.css" />
<script src="/static/jquery.min.js"></script>
<script src="/lib/marked.min.js"></script>
<script src="/lib/prettify.min.js"></script>
<script src="/lib/raphael.min.js"></script>
<script src="/lib/underscore.min.js"></script>
<script src="/lib/sequence-diagram.min.js"></script>
<script src="/lib/flowchart.min.js"></script>
<script src="/lib/jquery.flowchart.min.js"></script>
<script src="editormd.min.js"></script>
</head>
<body>
<div id="doc-content">
<textarea style="display:none;" placeholder="markdown語(yǔ)言">${md.content }</textarea>
</div>
<script type="text/javascript">
var testEditor;
$(function () {
testEditor = editormd.markdownToHTML("doc-content", {//注意：這里是上面DIV的id
htmlDecode: "style,script,iframe",
emoji: true,
taskList: true,
tocm: true,
tex: true, // 默認(rèn)不解析
flowChart: true, // 默認(rèn)不解析
sequenceDiagram: true, // 默認(rèn)不解析
codeFold: true
});});
</script>
</body>
</html>
