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>