如何將editor.md的圖片上傳改成七牛?

sourcenode 發(fā)布于2019-08-19 18:32 / 2968人閱讀

摘要：之前的編輯器一直用的是但是問(wèn)題也不少之后覺(jué)得換成編輯器首選當(dāng)然就是主要原因就是界面美觀功能全面但是問(wèn)題也有比如圖片上傳不知道為什么作者會(huì)用那么蛋疼的表單上傳難道只是為了兼容看了上的維護(hù)時(shí)間最后一次維護(hù)差不多半年了想讓作者來(lái)改可能性是不大了那

之前的編輯器一直用的是simditor, 但是問(wèn)題也不少, 之后覺(jué)得換成markdown編輯器, 首選當(dāng)然就是editor.md, 主要原因就是界面美觀, 功能全面...

但是editor.md問(wèn)題也有, 比如圖片上傳, 不知道為什么作者會(huì)用那么蛋疼的表單上傳, 難道只是為了兼容IE8? 看了github上的維護(hù)時(shí)間, 最后一次維護(hù)差不多半年了, 想讓作者來(lái)改, 可能性是不大了, 那么就只能自己來(lái)了...

editor.md的圖片上傳是以插件的形式存在的, 文件在./plugins/image-dialog/image-dialog.js, 我們就拿這個(gè)文件開(kāi)刀.

另外, editor.md添加圖片后, 不設(shè)置alt, 會(huì)自動(dòng)跳到第二行, 只需要把cm.setCursor(cursor.line, cursor.ch + 2)注釋了即可, 沒(méi)有搞明白作者這段代碼的用意是什么...

exports.fn.imageDialog = function () {
    var cm = this.cm
    var lang = this.lang
    var editor = this.editor
    var settings = this.settings
    var cursor = cm.getCursor()
    var selection = cm.getSelection()
    var imageLang = lang.dialog.image
    var classPrefix = this.classPrefix
    var iframeName = classPrefix + "image-iframe"
    var dialogName = classPrefix + pluginName,
        dialog
    cm.focus()
    var loading = function (show) {
        var _loading = dialog.find("." + classPrefix + "dialog-mask")
        _loading[(show) ? "show" : "hide"]()
    }
    if (editor.find("." + dialogName).length < 1) {
        var guid = new Date().getTime()
        var action = settings.imageUploadURL + (settings.imageUploadURL.indexOf("?") >= 0 ? "&" : "?") + "guid=" + guid
        if (settings.crossDomainUpload) {
            action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid
        }
        var dialogContent = ((settings.imageUpload) ? "" : "") +
            "" + imageLang.url + "" +
            "" + (function () {
                return (settings.imageUpload) ? "" +
                "" +
                "" +
                "" : ""
            })() +
            "
" +
            "" + imageLang.alt + "" +
            "" +
            "
" +
            "" + imageLang.link + "" +
            "" +
            "
" +
            ((settings.imageUpload) ? "" : "")
        dialog = this.createDialog({
            title: imageLang.title,
            width: (settings.imageUpload) ? 465 : 380,
            height: 254,
            name: dialogName,
            content: dialogContent,
            mask: settings.dialogShowMask,
            drag: settings.dialogDraggable,
            lockScreen: settings.dialogLockScreen,
            maskStyle: {
                opacity: settings.dialogMaskOpacity,
                backgroundColor: settings.dialogMaskBgColor
            },
            buttons: {
                enter: [lang.buttons.enter, function () {
                    var url = this.find("[data-url]").val()
                    var alt = this.find("[data-alt]").val()
                    var link = this.find("[data-link]").val()
                    if (url === "") {
                        alert(imageLang.imageURLEmpty)
                        return false
                    }
                    var altAttr = (alt !== "") ? " "" + alt + """ : ""
                    var arr_url = url.split("$$")
                    var text = ""
                    for (var i = 0, length = arr_url.length; i < length; i++) {
                        if (link === "" || link === "http://") {
                            text = text + "![" + alt + "](" + arr_url[i] + altAttr + ")

"
                        } else {
                            text = text + "[![" + alt + "](" + arr_url[i] + altAttr + ")](" + link + altAttr + ")

"
                        }
                    }
                    cm.replaceSelection(text)
                    if (alt === "") {
                        // cm.setCursor(cursor.line, cursor.ch + 2)
                    }
                    this.hide().lockScreen(false).hideMask()
                    return false
                }],
                cancel: [lang.buttons.cancel, function () {
                    this.hide().lockScreen(false).hideMask()
                    return false
                }]
            }
        })
        dialog.attr("id", classPrefix + "image-dialog-" + guid)
        if (!settings.imageUpload) {
            return
        }
        var Qiniu_upload = function(files, length, i) {
            if (length > i) {
                var formdata = new FormData()
                formdata.append("file", files[i])
                formdata.append("key", new Date().getTime() + ".jpg")
                formdata.append("token", "七牛賬號(hào)對(duì)應(yīng)的token")
                $.ajax({
                    type: "POST",
                    url: "http://up.qiniu.com/",
                    data: formdata,
                    dataType: "json",
                    contentType: false,
                    processData: false
                }).then(function(json) {
                    var oldurl = $("[data-url]").val()
                    if (oldurl === "") {
                        $("[data-url]").val("七牛圖片服務(wù)器的域名/" + json.key)
                    } else {
                        oldurl = oldurl + "$$七牛圖片服務(wù)器的域名/" + json.key
                        $("[data-url]").val(oldurl)
                    }
                    i++
                    Qiniu_upload(files, length, i)
                }, function (err) {
                    console.log(err)
                })
            } else {
                $("[name="file"]").val("")
                loading(false)
            }
        }
        var submitHandler = function() {
            var files = $("[name="file"]")[0].files
            if (files.length > 0) {
                Qiniu_upload(files, files.length, 0)
            }
            return false
        }
        var fileInput = dialog.find("[name="file"]")
        fileInput.off("change").on("change", function() {
            var fileName = fileInput.val()
            var isImage = new RegExp("(.(" + settings.imageFormats.join("|") + "))$") // /(.(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)
            dialog.find("[type="submit"]").off("click").on("click", submitHandler).trigger("click")
        })
    }
    dialog = editor.find("." + dialogName)
    dialog.find("[type="text"]").val("")
    dialog.find("[type="file"]").val("")
    dialog.find("[data-link]").val("http://")
    this.dialogShowMask(dialog)
    this.dialogLockScreen()
    dialog.show()
}