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 我的项目中的目录如下：
页面中须要引入的文件，其余插件依据须要再减少
<!-- 页面中增加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格局的内容也同样提交到后盾。
好，到这边你就能够看到页面成果了。如下：