乐趣区

关于editor:解决Editormd上传图片获取不到图片地址问题

jiezi

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:'![](https://img1.446677.xyz/2021/07/04/81903e6c0536ef3a87783a6e7afc3093.jpg) ![](https://img1.446677.xyz/2021/07/08/889db52a8e84a58e9bf63970f3a01e92.jpg)',
    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 格局的内容也同样提交到后盾。
好，到这边你就能够看到页面成果了。如下：

退出移动版