Editor.md图片上传获取不到图片地址,Editor.md图片上传iframe存在跨域情况,几经调试都不好用,最后采取替代方案,还不存在跨域情况
最近项目中要支持markdown 编辑器,现在基本做技术的没有不知道Markdown 的,因为实在是太强大了,只需要了解很简单的几个操作,即可编辑非常优美的文章,包括TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 ,不在让你浪费时间在格式的调整。
背景
是在PC端使用,直接引入JQuery和Markdown.md插件进行使用
资源:
Editor.md
editor.md的github
editor.md.zip包下载地址
jquery-3.6.0.min.js
jquery-form github
这个插件就不多说了,以为官网已经说的很多了,虽然在使用上有点小瑕疵,但是大体上还是很不错的,即插即用。
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<