Editor.md图片上传获取不到图片地址，Editor.md图片上传iframe存在跨域情况，几经调试都不好用，最后采取替代方案，还不存在跨域情况。
最近项目中要支持markdown 编辑器，现在基本做技术的没有不知道Markdown 的，因为实在是太强大了，只需要了解很简单的几个操作，即可编辑非常优美的文章，包括TeX科学公式（基于KaTeX）、流程图 Flowchart 和 时序图 ，不在让你浪费时间在格式的调整。
背景
是在PC端使用，直接引入JQuery和Markdown.md插件进行使用
editor.md目录介绍
这边需要说明一下 editor.md目录，本文介绍的版本为v1.5.0，在首页下载完成，解压editor.md-master.zip文件，可以看到如下图的目录结构：
图中红色框内是我们要引用到项目的文件和目录。
- css目录中可选择editormd.min.css放在对应的项目css目录中；
- js可选择editormd.min.js放置在对应项目的js目录中，需要注意的是同时需要引入jQuery，这里使用jquery.min.js；
- examples文件夹中是一部分核心功能的demo，在使用的过程中用到对应的组件或功能可打开参考；
- fonts是需要用到字体，可一并引入项目；
- images是一些加载类的图片；
- lib是editor.md依赖的第三方js资源，比如流程图的js资源；
- plugins主要是编辑器上面的操作功能插件，比如图片上传等，可选择使用的进行加载；
导入到web 项目中的目录如下：
页面中需要引入的文件，其他插件根据需要再增加
代码语言：javascript复制<!-- 页面中添加css -->
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./css/editormd.css" />
<!-- 页面中添加div -->
<div id="editormd">
<textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<!-- 页面中添加js -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jqueryform@4.3.0.min.js"></script>
<script type="text/javascript" src="js/editormd.min.js"></script>
<script type="text/javascript" src="js/showdown@1.9.1.min.js"></script>
<script>
var testEditor = editormd("editormd", {
width: "90%",
height: 'calc(100vh - 85px)',
path : './lib/',
// theme : "dark",
// previewTheme : "dark",
// editorTheme : "pastel-on-dark",
// markdown : content?content:' ',
markdown : content,
codeFold : true,
//syncScrolling : false,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
//watch : false, // 关闭实时预览
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
//toolbar : false, //关闭工具栏
//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
emoji : true,
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
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "https://api.xxxx.com/api/v1/editorMdImgUpload",
onload : function() {
/*上传图片成功后可以做一些自己的处理*/
console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
});
</script>
复制代码id为editormd，后面的js代码中需要用到。而且源码内部也是通过这个作为前缀的。
通过form表单提交时后台可通过content-editormd-markdown-doc获取到对应的markdown文档内容。比如Java中可通过request.getParameter(“content-editormd-markdown-doc”) 注意：此处需要注意的是，无论需要html格式的内容还是markdown格式的内容，都只需要写一个textarea。此处有一个很大的坑。不少其他教程中说需要两个textarea，那么会导致后一个textarea后台获得的数据是一个数组，而不是单纯的HTML内容。
编辑器中的编辑配置： path路径需要指定到项目中对应的lib的路径。如果设置不对markdown 无法渲染出来。
saveHTMLToTextarea设置为true表示，转化为html格式的内容也同样提交到后台。
好，到这边你就可以看到页面效果了。如下：
