kindeditor編輯器上傳圖片跨域

項目通常引入的是kindeditor-all.min.js，這里我們需要改為引入kindeditor-all.js，因為要對其源碼進行修改。

1.打開文件，搜索下面的這行代碼：

KindEditor.plugin('image', function(K) {

2.查找下面提交圖片辦法，並將其注釋掉,因為會出現跨域問題：

//uploadbutton.submit();

3.把下邊的代碼粘在上一行代碼的后邊：

var formData = new FormData();
var file=uploadbutton.fileBox[0].files[0];
formData.append(file.name, file);
//console.log(file,formData)
K.ajaxForm(self.options.uploadJson, function(data) {
    dialog.hideLoading();
    //console.log(data);
    if (data.error==0) {
        //console.log(self.options);
        var html = '<img src="' + self.options.basePath + data.url + '" />';
        //console.log(html)
        self.appendHtml(html).hideDialog().focus();
    }
},'POST',formData,'json');

4.輸入_ajax,查找_ajax名稱的函數,在此函數的后面新增如下代碼:

function _ajaxForm(url, fn, method, param, dataType) {
    method = method || 'GET';
    dataType = dataType || 'json';
    var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.open(method, url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if (fn) {
                var data = _trim(xhr.responseText);
                if (dataType == 'json') {
                    data = _json(data);
                }
                fn(data);
            }
        }
    };
    xhr.send(param);
}

5.在此函數后面加上如下代碼,這樣就可以用ajax方式上傳圖片了:

K.ajaxForm=_ajaxForm;

 

 

 

tip：本文是為了遇到類似問題時方便本人查找

原文鏈接：https://blog.csdn.net/alongxiao/java/article/details/104831596