Editor.md 修改 image-dialog 默认图片上传方式

Editor.md 是一个很好用的 markdown 编辑器，在使用过程中遇到一个图片上传的问题。

插件原方法是使用了一个 Form 来提交图片资源，我在这个基础上添加了一个 upload 方法，用来上传图片资源。储存图片使用的是阿里云的OSS。

源代码

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/*' />" +
            "<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/>" +
    ((settings.imageUpload) ? "</form>" : "</div>");

这段代码作用是动态生成上传图片Dialog的dom，需要删掉form以及iframe，替换submit按钮为一个div就好了。[查看源码]

var submitHandler = function () {
    var uploadIframe = document.getElementById(iframeName);

    uploadIframe.onload = function () {

        loading(false);

        var body = (uploadIframe.contentWindow ? uploadIframe.contentWindow : uploadIframe.contentDocument).document.body;
        var json = (body.innerText) ? body.innerText : ((body.textContent) ? body.textContent : null);

        json = (typeof JSON.parse !== "undefined") ? JSON.parse(json) : eval("(" + json + ")");

        if (!settings.crossDomainUpload) {
            if (json.success === 1) {
                dialog.find("[data-url]").val(json.url);
            }
            else {
                alert(json.message);
            }
        }

        return false;
    };
};

dialog.find("[type='submit']").bind("click", submitHandler).trigger("click");

这段代码作用是当触发上传文件之后，手动触发submit按钮并执行submitHandler，这段代码直接干掉。[查看源码]

新增代码

var upload = function (url, file, callback) {
    let formData = new FormData();

    for (const key in file) {
        formData.append(key, file[key]);
    }

    $.ajax({
        url,
        type: "POST",
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success(res) { callback(res.data) },
        error(err) { console.log(err); callback() }
    });
};

在13行增加一个自己的upload方法。

upload(settings.imageUploadURL, { [fileName]: e.target.files[0] }, (url) => {
    loading(false);
     if(url) {
         dialog.find("[data-url]").val(url); 
     }
});

在155行调用upload方法，增加回调方法设置input value。