Markdown编辑器的使用

　　　　<link rel="stylesheet"href="/smart-api/htdocs/mdeditor/css/editormd.css" />

　　　　<script src="/smart-api/htdocs/mdeditor/js/jquery.min.js"></script>
　　　　<script src="/smart-api/htdocs/mdeditor/js/editormd.min.js"></script>

　　<div id="my-editormd" >
　　　　<textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea>
　　　　<!-- 注意：name属性的值-->
　　　　<textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
　　</div>

<script type="text/javascript">
　　$(function() {
　　　　editormd("my-editormd", {//注意1：这里的就是上面的DIV的id属性值
　　　　　　width : "90%",
　　　　　　height : 640,
　　　　　　syncScrolling : "single",
　　　　　　path : "/smart-api/htdocs/mdeditor/lib/",//注意2：你的路径
　　　　saveHTMLToTextarea : true//注意3：这个配置，方便post提交表单
　　});
});
</script>

<script type="text/javascript">
　　$(function() {
　　　　editormd("my-editormd", {//注意1：这里的就是上面的DIV的id属性值
　　　　　　width : "90%",
　　　　　　height : 640,
　　　　　　syncScrolling : "single",
　　　　　　path : "/smart-api/htdocs/mdeditor/lib/",//注意2：你的路径
　　　　　　saveHTMLToTextarea : true,//注意3：这个配置，方便post提交表单

　　　　　　/**上传图片相关配置如下*/
　　　　　　imageUpload : true,
　　　　　　imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
　　　　　　imageUploadURL : "/smart-api/upload/editormdPic/",//注意你后端的上传图片服务地址
　　　　});
　　});
</script>

（注意：@RequestParam(value = "editormd-image-file", required = true注解）

@RequestMapping("editormdPic")
@ResponseBody
public JSONObject editormdPic (@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request,HttpServletResponse response) throws Exception{
　　String trueFileName = file.getOriginalFilename();
　　String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));
　　String fileName = System.currentTimeMillis()+"_"+CommonUtils.getRandomNumber(100, 999)+suffix;
　　String path = request.getSession().getServletContext().getRealPath("/assets/msg/upload/");
　　System.out.println(path);
　　File targetFile = new File(path, fileName); 
　　if(!targetFile.exists()){ 
　　　　targetFile.mkdirs(); 
　　}
　　//保存 
　　try { 
　　　　file.transferTo(targetFile); 
　　} catch (Exception e) { 
　　　　e.printStackTrace(); 
　　}
　　JSONObject res = new JSONObject();
　　res.put("url", Constant.WEB_ROOT+"assets/msg/upload/"+fileName);
　　res.put("success", 1);
　　res.put("message", "upload success!");
　　return res;
}

<script src="/smart-api/htdocs/mdeditor/js/jquery.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/marked.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/prettify.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/raphael.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/underscore.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/sequence-diagram.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/flowchart.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/jquery.flowchart.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/js/editormd.min.js"></script>

<div id="doc-content">
　　<textarea style="display:none;">${message.detail }</textarea>
</div>

<script type="text/javascript">
　　var testEditor;
　　$(function () {
　　　　testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
　　　　　　htmlDecode: "style,script,iframe",
　　　　　　emoji: true,
　　　　　　taskList: true,
　　　　　　tex: true, // 默认不解析
　　　　　　flowChart: true, // 默认不解析
　　　　　　sequenceDiagram: true, // 默认不解析
　　　　　　codeFold: true,
　　　　});
　　});
</script>

<script type="text/javascript">
　　var myEditor;
　　$(function() {
　　　　myEditor = editormd("my-editormd", {
　　　　　　width : "90%",
　　　　　　height : 800,
　　　　　　syncScrolling : "single",
　　　　　　path : "/smart-api/htdocs/mdeditor/lib/",
　　　　　　saveHTMLToTextarea : true,

　　　　　　emoji: true,//emoji表情，默认关闭
　　　　　　taskList: true,
　　　　　　tocm: true, // Using [TOCM]
　　　　　　tex: true,// 开启科学公式TeX语言支持，默认关闭

　　　　　　flowChart: true,//开启流程图支持，默认关闭
　　　　　　sequenceDiagram: true,//开启时序/序列图支持，默认关闭,

　　　　　　dialogLockScreen : false,//设置弹出层对话框不锁屏，全局通用，默认为true
　　　　　　dialogShowMask : false,//设置弹出层对话框显示透明遮罩层，全局通用，默认为true
　　　　　　dialogDraggable : false,//设置弹出层对话框不可拖动，全局通用，默认为true
　　　　　　dialogMaskOpacity : 0.4, //设置透明遮罩层的透明度，全局通用，默认值为0.1
　　　　　　dialogMaskBgColor : "#000",//设置透明遮罩层的背景颜色，全局通用，默认为#fff

　　　　　　codeFold: true,

　　　　　　imageUpload : true,
　　　　　　imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
　　　　　　imageUploadURL : "/smart-api/upload/editormdPic/",

　　　　　　/*上传图片成功后可以做一些自己的处理*/
　　　　　　onload: function () {
　　　　　　//console.log('onload', this);
　　　 　　 //this.fullscreen();
　　　　　　//this.unwatch();
　　　 　　 //this.watch().fullscreen();
　　　 　　 //this.width("100%");
　　　 　　 //this.height(480);
　　　 　　 //this.resize("100%", 640);
　　　　　},

　　　　　/**设置主题颜色*/
　　　　　editorTheme: "pastel-on-dark",
　　　　　theme: "gray",
　　　　　previewTheme: "dark"
　　　});
　　});
</script>