editor.md图片上传七牛云或阿里云oss-黄运鑫的博客

Editor.md官网
上传图片的代码在image-dialog.js中，只需要修改上传代码就能实现自己的上传逻辑
例子中代码是上传到七牛，上传到阿里云oss同理

打开项目中的image-dialog.js文件，找到上传文件的方法，源代码如下：

fileInput.bind("change", function() {
	var fileName  = fileInput.val();
	var isImage   = new RegExp("(\\.(" + settings.imageFormats.join("|") + "))$", "i"); // /(\.(webp|jpg|jpeg|gif|bmp|png))$/

	if (fileName === "")
	{
		alert(imageLang.uploadFileEmpty);

        return false;
	}

    if (!isImage.test(fileName))
	{
		alert(imageLang.formatNotAllowed + settings.imageFormats.join(", "));

        return false;
	}

    loading(true);

    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");
});

将原始的提交表单的方法注释掉，改为我们自己的上传方法，修改后代码如下：

fileInput.bind("change", function() {
	var fileName  = fileInput.val();
	var isImage   = new RegExp("(\\.(" + settings.imageFormats.join("|") + "))$", "i"); // /(\.(webp|jpg|jpeg|gif|bmp|png))$/
	if (fileName === "")
	{
		alert(imageLang.uploadFileEmpty);
        return false;
	}
    if (!isImage.test(fileName))
	{
		alert(imageLang.formatNotAllowed + settings.imageFormats.join(", "));
        return false;
	}
    loading(true);
    
    //自定义上传代码
    //从后台接口获取上传七牛的token
    $.getJSON(settings.tokenUrl, function (result) {
        let qiniuToken = result.data.token;
        //图片上传到七牛
        var formData = new FormData();
        formData.append('token', qiniuToken);
        formData.append('file', fileInput[0].files[0]);
        $.ajax({
            url: "https://up-z2.qiniup.com",
            type: "POST",
            data: formData,
            dataType: "json",
            processData: false,
            contentType: false,
            success: function (result) {
                dialog.find("[data-url]").val(settings.outsideChain + "/" + result.key);
                loading(false);
            }
        });
    });
    //注释掉原始的方法
    // 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");
});

其中settings.tokenUrl和settings.outsideChain是editormd初始化时传入的变量，代码如下：

<script type="text/javascript">
    $(function () {
        var editor = editormd("test-editor", {
            width: "100%",
            height: "500px",
            path: "${ctx}/static/editormd/lib/",
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            //没用了
            imageUploadURL: "${ctx}/static/editormd/test",
            //获取七牛tokenUrl的后台接口地址
            tokenUrl: "${param.tokenUrl}",
            //七牛外链域名
            outsideChain: "${outsideChain}",
        });
    });
</script>

做你害怕做的事情，然后你会发现，不过如此。

目录