Editor.md解决跨域上传的问题

编辑 editormd\plugins\image-dialog\image-dialog.js

替换以下代码片段

  1. if (settings.crossDomainUpload) {
  2. action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid;
  3. }
  4. var csrfToken = $('meta[name="csrf-token"]').attr('content');
  5. var csrfField = "";
  6. if (csrfToken) {
  7. csrfField = "<input type='hidden' name='csrf_token' value='" + csrfToken + "' />";
  8. }
  9. var dialogContent = ((settings.imageUpload) ? "<form action=\"" + action + "\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">") +
  10. ((settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "") +
  11. "<label>" + imageLang.url + "</label>" +
  12. "<input type=\"text\" data-url />" + (function () {
  13. return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
  14. "<input type=\"file\" name=\"" + classPrefix + "image-file\" accept=\"image/*\" />" +
  15. csrfField +
  16. "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
  17. "</div>" : "";
  18. })() +
  19. "<br/>" +
  20. "<label>" + imageLang.alt + "</label>" +
  21. "<input type=\"text\" value=\"" + selection + "\" data-alt />" +
  22. "<br/>" +
  23. "<label>" + imageLang.link + "</label>" +
  24. "<input type=\"text\" value=\"http://\" data-link />" +
  25. "<br/>" + csrfField +
  26. ((settings.imageUpload) ? "</form>" : "</div>");

误区分析

代码第4行,name和自己设置的mete里的name保持一致
代码第7行,(flask框架下)name必须是csrf_token

上传图片部分代码

views.py

  1. @post.route('/upload/', methods=['POST'])
  2. def upload():
  3. file = request.files.get('editormd-image-file')
  4. if not file:
  5. res = {
  6. 'success': 0,
  7. 'message': '上传失败'
  8. }
  9. else:
  10. ex = os.path.splitext(file.filename)[1]
  11. filename = datetime.now().strftime('%Y%m%d%H%M%S') + ex
  12. path_uploads = config['uploads_path']
  13. if not os.path.exists(path_uploads):
  14. os.makedirs(path_uploads)
  15. file.save(os.path.join(path_uploads, filename))
  16. res = {
  17. 'success': 1,
  18. 'message': '上传成功',
  19. 'url': url_for('post.image', name=filename)
  20. }
  21. return jsonify(res)
  22. @post.route('/image/<name>')
  23. def image(name):
  24. path_uploads = config['uploads_path']
  25. if not os.path.exists(path_uploads):
  26. os.makedirs(path_uploads)
  27. with open(os.path.join(path_uploads, name), 'rb') as f:
  28. resp = Response(f.read(), mimetype="image/jpeg")
  29. return resp

aaa.html

  1. <form>
  2. <div id="editor_md">
  3. <textarea name="body" style="display:none;">{{ form.body.data }}</textarea>
  4. </div>
  5. </form>

aaa.js

  1. <script type="text/javascript">
  2. var testEditor;
  3. $(function () {
  4. testEditor = editormd("editor_md", {
  5. width: "90%",
  6. height: 640,
  7. syncScrolling: "single",
  8. path: "{{ url_for('static',filename='editormd/lib/') }}",
  9. imageUpload: true,
  10. imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
  11. imageUploadURL: "{{ url_for('post.upload') }}",
  12. {#crossDomainUpload:true,#}
  13. {#uploadCallbackURL:"{{ url_for('post.upload') }}",#}
  14. searchReplace: true,
  15. saveHTMLToTextarea: true,
  16. emoji: true,//emoji表情,默认关闭
  17. taskList: true,
  18. tocm: true, // Using [TOCM]
  19. tex: true,// 开启科学公式TeX语言支持,默认关闭
  20. flowChart: true,//开启流程图支持,默认关闭
  21. sequenceDiagram: true,//开启时序/序列图支持,默认关闭,
  22. dialogLockScreen: false,//设置弹出层对话框不锁屏,全局通用,默认为true
  23. dialogShowMask: false,//设置弹出层对话框显示透明遮罩层,全局通用,默认为true
  24. dialogDraggable: false,//设置弹出层对话框不可拖动,全局通用,默认为true
  25. dialogMaskOpacity: 0.4, //设置透明遮罩层的透明度,全局通用,默认值为0.1
  26. dialogMaskBgColor: "#000",//设置透明遮罩层的背景颜色,全局通用,默认为#fff
  27. codeFold: true,
  28. /**设置主题颜色*/
  29. editorTheme: "pastel-on-dark",
  30. theme: "gray",
  31. previewTheme: "dark",
  32. });
  33. });
  34. </script>

Editor.md解决跨域上传的问题的更多相关文章

  1. Ueditor1.4.3实现跨域上传到独立文件服务器,完美解决单文件和多文件上传!

    再写配置方法之前先吐槽一下网上的各种教程,TM没一个有卵用,一群傻屌不会写就别写,写了就要负责. 百度google搜了半天,全是配置什么document.domain,根域名什么的,我只想对你说: 好 ...

  2. 解决使用elementUI框架el-upload跨域上传时session丢失问题

    解决方法一: 1.使用elementUI框架el-upload跨域上传时,后端获取不到cookie,后端接口显示未登录,在添加了 with-credentials="true"后依 ...

  3. html5上传图片(一)一跨域上传

    最近开发一个上传图片的模块,传图片的接口不支持跨域上传,并且只支持单张上传,而我们的产品要求要实现多张上传.我搞了一个代理页面,先将图片传到代理页面,然后再通过代理页面传到上传图片接口.虽然这种方式经 ...

  4. 从Ueditor跨域上传,总结的一次跨域上传的爬坑经历

    项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. ...

  5. Angular4 后台管理系统搭建(10) - 做一个通用的可跨域上传文件的组件

    写的很慢,不知不觉这是第十篇了.但是我其他事情太多,只能抽空写下.现在angular4或angular2流行的上传方式是ng2-file-upload.它的功能很强大.但是我没有配置成可以跨域上传的. ...

  6. webuploader 跨域上传demo(还没有写记录一下)

    webuploader 跨域上传demo(还没有写记录一下)

  7. js跨域上传文件 iframe

    封装好的jq插件 (function () { var iframe = '<iframe name="jqUploadIframe" style="display ...

  8. 我是如何一步步编码完成万仓网ERP系统的(七)产品库设计 3.品牌图片跨域上传

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  9. POST方式跨域上传文件

    JSONP请求有限制: 第一,不能跳出两层, 第二,不支持POST. 往往解决跨域POST请求的方案是个"古老"方法, 请求同域下的iframe. 服务器端:  需要附加头信息: ...

随机推荐

  1. 预估ceph的迁移数据量

    引言 我们在进行 ceph 的 osd 的增加和减少的维护的时候,会碰到迁移数据,但是我们平时会怎么去回答关于迁移数据量的问题,一般来说,都是说很多,或者说根据环境来看,有没有精确的一个说法,到底要迁 ...

  2. 分布式监控系统之Zabbix基础使用

    前文我们了解了分布式监控系统zabbix的相关组件的作用和zabbix的部署,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13997582.html:今天我们 ...

  3. a^b(取模运算)

    a^b(sdtbu oj 1222) Description 对于任意两个正整数a,b(0 <= a, b < 10000)计算ab各位数字的和的各位数字的和的各位数字的和的各位数字的和. ...

  4. Spring Cloud Security OAuth2.0 认证授权系列(一) 基础概念

    世界上最快的捷径,就是脚踏实地,本文已收录[架构技术专栏]关注这个喜欢分享的地方. 前序 最近想搞下基于Spring Cloud的认证授权平台,总体想法是可以对服务间授权,想做一个基于Agent 的无 ...

  5. Web安全常见漏洞修复建议

    转载地址:https://security.pingan.com/blog/17.html SQL注入 在服务器端要对所有的输入数据验证有效性. 在处理输入之前,验证所有客户端提供的数据,包括所有的参 ...

  6. Python相比其他计算机语言真的更有优势吗?

    要了解Python相比其他计算机语言,首先要了解Python语言的特点 Python语言的特点 一.简单易学.明确优雅.开发速度快 ①简单易学:与 C 和 Java 比,Python的学习成本和难度曲 ...

  7. 历时两年零三个月,从刚毕业的外包到现在的阿里P7offer,我只做了这几件事

    前言 最近,金九银十在即,很多人都在准备面试,特别给大家总结了 Java 程序员面试必备题,这份面试清单是我从 去年开始收集的,一方面是给公司招聘用,另一方面是想用它来挖掘我在 Java 技术栈中的技 ...

  8. 找回消失的IDM嗅探下载浮动条的方法

    我们之前讲了IDM资源嗅探的下载浮动条的设置方法,然而在有些时候,这个下载浮动条无法正常显示出来,影响了下载体验,这个问题该如何解决呢? 1.安装IDM扩展程序 一般来说,在IDM安装完成后,会在浏览 ...

  9. 浅谈 van Emde Boas 树——从 u 到 log log u 的蜕变

    本文参考算法导论完成. 模板题在此 QwQ 优化的过程比较长,还请读者耐心阅读,认真理解. 最初的想法 我会暴力! 用一个 \(size\) 数组维护每个元素出现的次数. 不细讲,时间复杂度 \(O( ...

  10. C语言讲义——快速排序

    快速排序是C.R.A.Hoare于1962年提出的一种划分交换排序 它采用了一种分治的策略,通常称其为分治法(Divide-and-ConquerMethod) 基本思想: 1.先从数列中取出一个数作 ...