关于editor:解决Editormd上传图片获取不到图片地址问题
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格局的内容也同样提交到后盾。好,到这边你就能够看到页面成果了。如下: ...