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. 服务器端: 需要附加头信息: ...
随机推荐
- go-zero之web框架
go-zero 是一个集成了各种工程实践的 web 和 rpc 框架,其中rest是web框架模块,基于Go语言原生的http包进行构建,是一个轻量的,高性能的,功能完整的,简单易用的web框架 服务 ...
- 《Machine Learning in Action》—— 懂的都懂,不懂的也能懂。非线性支持向量机
说在前面:前几天,公众号不是给大家推送了第二篇关于决策树的文章嘛.阅读过的读者应该会发现,在最后排版已经有点乱套了.真的很抱歉,也不知道咋回事,到了后期Markdown格式文件的内容就解析出现问题了, ...
- 02python开发之基本运算符
02 python开发之基本运算符 目录 02 python开发之基本运算符 2 基本运算符 2.1 算数运算符 2.1.1 种类 2.1.2 用法 2.2 比较运算符 2.2.1 种类 2.2.2 ...
- BT下载器Folx中删除任务与删除文件的功能区别
当用户使用Folx完成了任务下载后,该任务仍会保留在下载列表中,并标注"已结束"的标记.随着使用时间的增长,Folx下载列表中会包含过多的"已结束"任务,用户需 ...
- 教你怎么设置Vegas渲染输出的选定范围
在制作视频时,很多用户进行到渲染时,常常会发生这样那样的问题,导致导出的视频效果不甚理想.归结原因,还是用户在渲染输出时的选定范围存在问题. 接下来小编就为大家具体介绍下:vegas如何设置渲染输出的 ...
- 如何用OCR文字识别软件将PDF转换成Excel
最近老板老是让小编处理PDF文件,这OCR识别软件咱也不懂,也不敢问,只能一字一字的码在Excel上,但是这波操作效率不高,还没完成任务,老板又发了一堆PDF文件需要处理,怎么办呢? 跟朋友说了这事后 ...
- 利用perspective 和 transform 里面的几个参数来实现旋转照片墙
旋转照片墙 首先,来看下,是什么效果吧,上效果图 ↓ 其实这个东西,很容易制作,先说下思路, 把照片都给叠在一起,然后 rotateY 旋转,给每张图片 旋转不一样的角度能构成一圈, 然后transl ...
- 堆的数据结构java
public class MaxHeap { private int[] data; private int count; private int capacity; public MaxHeap(i ...
- iOS 默认Cell选中
NSInteger selectIndex = [NSIndexPath indexPathForItem:0 inSection:0]; [self.ui_tableView selectRowAt ...
- C++重复结构题解
买房子 总时间限制: 1000ms 内存限制: 65536kB 描述 某程序员开始工作,年薪N万,他希望在中关村公馆买一套60平米的房子,现在价格是200万,假设房子价格以每年百分之K增长,并且该 ...