editormd编辑器替换原生上传接口(原创)

日期:2020-10-09 11:54:38    浏览:263

经过几个小时的整理,终于把原生上传接口替换完成
下面是操作流程

  1. imageUpload: true,

将 imageUpload设置为true, 开启上传模块

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 id='ossimgfile' type="file" name=" + classPrefix + "image-file" accept="image/*" />" +
            "<input class='editormd-btn editormd-cancel-btn' type="button" 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>");

上图代码对应这个对话框

大概在165行我们添加自己的上传方法

var upingHandle=function (){
// console.log(document.getElementsByTagName("[name='" + classPrefix + "image-file']"));
ossUpload({
'url': ossgu,
'input': document.getElementById("ossimgfile"),
'type': 'article',//指定上传类型
'progress': function (e) {
},
'finsh': function (e) {
if (e.status == "ok") {
dialog.find("[data-url]").val(e.url);
}
}
});
//关闭上传动画
loading(false);
}

大概在186行,编辑器原生的方法

var submitHandler = function() {

在这个方法下面,绑定我们自己的控件,原生的注释即可

// dialog.find("[type=\"submit\"]").bind("click", submitHandler).trigger("click");
dialog.find("[type=\"button\"]").bind("click", upingHandle).trigger("click");

 

上面两张图片是我修改接口后,所上传的图片,成功上传图片,哈哈!!!

Tags: js 编辑器

世事无常

要有遥不可及的梦想,也要有脚踏实地的本事