Ueditor拖拽圖片轉base64

ueditor 中拖拽圖片，默認的是會上傳到服務器，然後根據服務器返回的結果來生成一般的<img>標籤。

那麼我需要實現拖拽圖片，生成的是srcData形式的<img>標籤。

1、在uedit的初始化參數中增加一個做 convertImageToBase64Enable。用來控制是按照原來的方式上傳還是用轉換成base64的形式來處理圖片。

2、修改autoupload.js代碼，重新編譯打包；或者修改umeditor.js中對應位置代碼。

改動點只有2處（以autoupload.js爲例）：

a：增加了一個insertBase64Image 的 function。 第15行處。

b：根據convertImageToBase64Enable參數來判斷對圖片的處理是上傳還是轉Base64。第71行處。

autoupload.js：

/**
 * @description
 * 1.拖放文件到編輯區域，自動上傳並插入到選區
 * 2.插入粘貼板的圖片，自動上傳並插入到選區
 * @author Jinqn
 * @date 2013-10-14
 */
UM.plugins['autoupload'] = function () {

    var me = this;

    me.setOpt('pasteImageEnabled', true);
    me.setOpt('dropFileEnabled', true);

    var insertBase64Image = function (file, editor) {
        var reader = new FileReader();
        reader.onload = function (e) {
            editor.execCommand('insertimage', {
                src: this.result,
                _src: this.result
            });
        };
        reader.readAsDataURL(file);
    }

    var sendAndInsertImage = function (file, editor) {
        //模擬數據
        var fd = new FormData();
        fd.append(editor.options.imageFieldName || 'upfile', file, file.name || ('blob.' + file.type.substr('image/'.length)));
        fd.append('type', 'ajax');
        var xhr = new XMLHttpRequest();
        xhr.open("post", me.options.imageUrl, true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.addEventListener('load', function (e) {
            try {
                var json = eval('(' + e.target.response + ')'),
                    link = json.url,
                    picLink = me.options.imagePath + link;
                editor.execCommand('insertimage', {
                    src: picLink,
                    _src: picLink
                });
            } catch (er) {
            }
        });
        xhr.send(fd);
    };

    function getPasteImage(e) {
        return e.clipboardData && e.clipboardData.items && e.clipboardData.items.length == 1 && /^image\//.test(e.clipboardData.items[0].type) ? e.clipboardData.items : null;
    }

    function getDropImage(e) {
        return e.dataTransfer && e.dataTransfer.files ? e.dataTransfer.files : null;
    }

    me.addListener('ready', function () {
        if (window.FormData && window.FileReader) {
            var autoUploadHandler = function (e) {
                var hasImg = false,
                    items;
                //獲取粘貼板文件列表或者拖放文件列表
                items = e.type == 'paste' ? getPasteImage(e.originalEvent) : getDropImage(e.originalEvent);
                if (items) {
                    var len = items.length,
                        file;
                    while (len--) {
                        file = items[len];
                        if (file.getAsFile) file = file.getAsFile();
                        if (file && file.size > 0 && /image\/\w+/i.test(file.type)) {
                            me.getOpt('convertImageToBase64Enable') ? insertBase64Image(file, me) : sendAndInsertImage(file, me);
                            hasImg = true;
                        }
                    }
                    if (hasImg) return false;
                }

            };
            me.getOpt('pasteImageEnabled') && me.$body.on('paste', autoUploadHandler);
            me.getOpt('dropFileEnabled') && me.$body.on('drop', autoUploadHandler);

            //取消拖放圖片時出現的文字光標位置提示
            me.$body.on('dragover', function (e) {
                if (e.originalEvent.dataTransfer.types[0] == 'Files') {
                    return false;
                }
            });
        }
    });

};

以下是autoupload.js的改動