Markdown编辑器editor.md的使用---markdown上传图片

一、Markdown和editor.md简介：

md

二、editor.md的使用：

2.1、下载：

2.2、简单使用：

2.2.1、在自己的页面上引入相关的css和js，代码如下：

<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>

2.2.2、在自己的页面中加上DIV：

my-editormd

request.getParameter("my-editormd-html-code")

<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>

saveHTMLToTextarea : true

my-editormd

$-html-code

2.2.3、在同页面中再加上如下JS代码：

<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>

editor.md

2.3、上传图片：

editor.md

![说明](url地址)

<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>

editor.md

{
success : 0 | 1, //0表示上传失败;1表示上传成功
message : "提示的信息",
url     : "图片地址" //上传成功时才返回
}

@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;

}

2.4、Markdown文档页面展示：

<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>

三、editor.md的更多配置项：

editor.md-master/examples

<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>

四、网站&源码：