Editor.md解决跨域上传的问题
Editor.md解决跨域上传的问题
编辑
editormd\plugins\image-dialog\image-dialog.js
替换以下代码片段
if (settings.crossDomainUpload) {
action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid;
}
var csrfToken = $('meta[name="csrf-token"]').attr('content');
var csrfField = "";
if (csrfToken) {
csrfField = "<input type='hidden' name='csrf_token' value='" + csrfToken + "' />";
}
var dialogContent = ((settings.imageUpload) ? "<form action=\"" + action + "\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">") +
((settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "") +
"<label>" + imageLang.url + "</label>" +
"<input type=\"text\" data-url />" + (function () {
return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
"<input type=\"file\" name=\"" + classPrefix + "image-file\" accept=\"image/*\" />" +
csrfField +
"<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
"</div>" : "";
})() +
"<br/>" +
"<label>" + imageLang.alt + "</label>" +
"<input type=\"text\" value=\"" + selection + "\" data-alt />" +
"<br/>" +
"<label>" + imageLang.link + "</label>" +
"<input type=\"text\" value=\"http://\" data-link />" +
"<br/>" + csrfField +
((settings.imageUpload) ? "</form>" : "</div>");
误区分析
代码第4行,name和自己设置的mete
里的name保持一致
代码第7行,(flask框架下)name必须是csrf_token
上传图片部分代码
views.py
@post.route('/upload/', methods=['POST'])
def upload():
file = request.files.get('editormd-image-file')
if not file:
res = {
'success': 0,
'message': '上传失败'
}
else:
ex = os.path.splitext(file.filename)[1]
filename = datetime.now().strftime('%Y%m%d%H%M%S') + ex
path_uploads = config['uploads_path']
if not os.path.exists(path_uploads):
os.makedirs(path_uploads)
file.save(os.path.join(path_uploads, filename))
res = {
'success': 1,
'message': '上传成功',
'url': url_for('post.image', name=filename)
}
return jsonify(res)
@post.route('/image/<name>')
def image(name):
path_uploads = config['uploads_path']
if not os.path.exists(path_uploads):
os.makedirs(path_uploads)
with open(os.path.join(path_uploads, name), 'rb') as f:
resp = Response(f.read(), mimetype="image/jpeg")
return resp
aaa.html
<form>
<div id="editor_md">
<textarea name="body" style="display:none;">{{ form.body.data }}</textarea>
</div>
</form>
aaa.js
<script type="text/javascript">
var testEditor;
$(function () {
testEditor = editormd("editor_md", {
width: "90%",
height: 640,
syncScrolling: "single",
path: "{{ url_for('static',filename='editormd/lib/') }}",
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "{{ url_for('post.upload') }}",
{#crossDomainUpload:true,#}
{#uploadCallbackURL:"{{ url_for('post.upload') }}",#}
searchReplace: true,
saveHTMLToTextarea: true,
emoji: true,//emoji表情,默认关闭
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
codeFold: true,
/**设置主题颜色*/
editorTheme: "pastel-on-dark",
theme: "gray",
previewTheme: "dark",
});
});
</script>
Editor.md解决跨域上传的问题的更多相关文章
- Ueditor1.4.3实现跨域上传到独立文件服务器,完美解决单文件和多文件上传!
再写配置方法之前先吐槽一下网上的各种教程,TM没一个有卵用,一群傻屌不会写就别写,写了就要负责. 百度google搜了半天,全是配置什么document.domain,根域名什么的,我只想对你说: 好 ...
- 解决使用elementUI框架el-upload跨域上传时session丢失问题
解决方法一: 1.使用elementUI框架el-upload跨域上传时,后端获取不到cookie,后端接口显示未登录,在添加了 with-credentials="true"后依 ...
- html5上传图片(一)一跨域上传
最近开发一个上传图片的模块,传图片的接口不支持跨域上传,并且只支持单张上传,而我们的产品要求要实现多张上传.我搞了一个代理页面,先将图片传到代理页面,然后再通过代理页面传到上传图片接口.虽然这种方式经 ...
- 从Ueditor跨域上传,总结的一次跨域上传的爬坑经历
项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. ...
- Angular4 后台管理系统搭建(10) - 做一个通用的可跨域上传文件的组件
写的很慢,不知不觉这是第十篇了.但是我其他事情太多,只能抽空写下.现在angular4或angular2流行的上传方式是ng2-file-upload.它的功能很强大.但是我没有配置成可以跨域上传的. ...
- webuploader 跨域上传demo(还没有写记录一下)
webuploader 跨域上传demo(还没有写记录一下)
- js跨域上传文件 iframe
封装好的jq插件 (function () { var iframe = '<iframe name="jqUploadIframe" style="display ...
- 我是如何一步步编码完成万仓网ERP系统的(七)产品库设计 3.品牌图片跨域上传
https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...
- POST方式跨域上传文件
JSONP请求有限制: 第一,不能跳出两层, 第二,不支持POST. 往往解决跨域POST请求的方案是个"古老"方法, 请求同域下的iframe. 服务器端: 需要附加头信息: ...
随机推荐
- 利用HUtool读取Excel内容
// 1.获取上传文件输入流 InputStream inputStream = null; try{ inputStream = file.getInputStream(); }catch (Exc ...
- 不会吧!做了这么久开发还有不会NIO的,看看BAT大佬是怎么用的吧
前言 在将NIO之前,我们必须要了解一下Java的IO部分知识. BIO(Blocking IO) 阻塞IO,在Java中主要就是通过ServerSocket.accept()实现的. NIO(Non ...
- 阿里面试官:小伙子,给我说一下Spring 和 Spring Boot 的区别吧
前言 对于 Spring和 SpringBoot到底有什么区别,我听到了很多答案,刚开始迈入学习 SpringBoot的我当时也是一头雾水,随着经验的积累.我慢慢理解了这两个框架到底有什么区别,相信对 ...
- ABBYY FineReader 15新增编辑页面布局功能
ABBYY FineReader 15(Windows系统) 新增编辑页面布局功能,允许用户修改PDF数字文档的页面布局,包括添加或者删除文字段落,文字块以及图片,更改段落,文字块,图片位置.添加或者 ...
- 有什么好用的Mac数据恢复软件
对于第一次上手苹果电脑的人来说,使用起来难免有点小难受,因为对苹果电脑操作系统不熟练,发生误删数据的事情也是屡见不鲜. 那么对于这种情况我们该怎么办呢?不用担心,今天小编就为大家推荐一款好用的苹果数据 ...
- jenkins master/slave模式
master是主机,只有master装jenkins slave是小弟机无需装jenkins,主要执行master分配的任务 一.新建slave 1.新建slave的方法:点击magian jenki ...
- linkedin第三方登陆
到linkedin注册成为开发者:https://developer.linkedin.com/zh-cn 成功后,创建应用,填写重定向地址,得到appid和appkey 使用这个sdk https: ...
- 将input 的文本框改为不可编辑状态
<input type="text" id = "textid" name="名称" value="值" size ...
- 在iOS中使用ZBar扫描二维码和条形码
最近做了个外包项目,里面用到了二维码扫描和微信支付!之前比较熟悉的是ZXing,但是在Xcode7.1里面发现竟然莫名的不支持,木有办法,从网上查了一下还有一种支持二维码扫描的东西,没错就是接下来我要 ...
- Java基础教程——注解
注解 JDK 5开始,Java支持注解. 注解,Annotation,是一种代码里的特殊标记,这些标记可以在编译.类加载.运行时被读取并执行,而且不改变原有的逻辑. 注解可以用于:生成文档.编译检查. ...