摘要：屬性介紹默認(rèn)是默認(rèn)是在粘貼操作時(shí)為空剪切板中的各項(xiàng)數(shù)據(jù)剪切板中的數(shù)據(jù)類型。避免重復(fù)創(chuàng)建上傳中文件成功失敗處理已上傳上傳出錯(cuò)添加文件到隊(duì)列并上傳開(kāi)始上傳其他參考獲取剪切板內(nèi)容，控制圖片粘貼在線代碼編輯器事件說(shuō)明

Markdown編輯器選用https://simplemde.com
它是一款純js實(shí)現(xiàn)的markdown編輯器。缺點(diǎn)不支持圖片上傳。那我們就得改造它。
simplemde是基于codemirror編輯器的.
先介紹基本：
codemirror文檔：http://codemirror.net/doc/man...
simplemde文檔:https://github.com/NextStepWe...
API文檔:
拖拽：
https://developer.mozilla.org...
https://developer.mozilla.org...

粘貼：
https://developer.mozilla.org...
https://developer.mozilla.org...

注意一點(diǎn)：目前firefox與chrome比較新的版本都實(shí)現(xiàn)了這些API。

綁定的元素不一定是input，普通的div也是可以綁定的，如果是給document綁定了，就相當(dāng)于全局了，任何時(shí)候的粘貼操作都會(huì)觸發(fā)。
獲取事件對(duì)象ClipboardEvent
先寫(xiě)一下事件綁定的代碼

pasteEle.addEventListener("paste", function (e){
    if ( !(e.clipboardData && e.clipboardData.items) ) {
        return ;
    }
 
    for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
        var item = e.clipboardData.items[i];
 
        if (item.kind === "string") {
            item.getAsString(function (str) {
                // str 是獲取到的字符串
            })
        } else if (item.kind === "file") {
            var pasteFile = item.getAsFile();
            // pasteFile就是獲取到的文件
        }
    }
});

粘貼事件提供了一個(gè)clipboardData的屬性，如果該屬性有items屬性，那么就可以查看items中是否有圖片類型的數(shù)據(jù)了。
clipboardData介紹
介紹一下clipboardData對(duì)象，它實(shí)際上是一個(gè)DataTransfer類型的對(duì)象，DataTransfer 是拖動(dòng)產(chǎn)生的一個(gè)對(duì)象，但實(shí)際上粘貼事件也是它。
屬性介紹
dropEffect String 默認(rèn)是 none
effectAllowed String 默認(rèn)是 uninitialized
files FileList 在粘貼操作時(shí)為空List
items DataTransferItemList 剪切板中的各項(xiàng)數(shù)據(jù)
types Array 剪切板中的數(shù)據(jù)類型。

DataTransferItem
items是一個(gè)DataTransferItemList對(duì)象，自然里面都是DataTransferItem類型的數(shù)據(jù)了。
DataTransferItem有兩個(gè)屬性kind和type

kind 一般為string或者file
type 具體的數(shù)據(jù)類型，例如具體是哪種類型字符串或者哪種類型的文件，即MIME-Type，常見(jiàn)的值有text/plain、text/html、Files。
方法

getAsFile 空 如果kind是file，可以用該方法獲取到文件
getAsString 回調(diào)函數(shù) 如果kind是string，可以用該方法獲取到字符串，字符串需要用回調(diào)函數(shù)得到，回調(diào)函數(shù)的第一個(gè)參數(shù)就是剪切板中的字符串
綜合

// demo 程序?qū)⒄迟N事件綁定到 document 上
document.addEventListener("paste", function (e) {
    var cbd = e.clipboardData;
    //var ua = window.navigator.userAgent;
 
    for(var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i];
        if(item.kind == "file"){
            var blob = item.getAsFile();
            if (blob.size === 0) {
                return;
            }
            // blob 就是從剪切板獲得的文件 可以進(jìn)行上傳或其他操作
        }
    }
}, false);

DragEvent
DragEvent.dataTransfer

dropEffect String 默認(rèn)是 none
effectAllowed String 默認(rèn)是 uninitialized
files FileList
items DataTransferItemList 剪切板中的各項(xiàng)數(shù)據(jù)
types Array 剪切板中的數(shù)據(jù)類型。
DataTransferItem
items是一個(gè)DataTransferItemList對(duì)象，自然里面都是DataTransferItem類型的數(shù)據(jù)了。

DataTransferItem有兩個(gè)屬性kind和type

kind 一般為string或者file
type 具體的數(shù)據(jù)類型，例如具體是哪種類型字符串或者哪種類型的文件，即MIME-Type，常見(jiàn)的值有images/*、text/plain、text/html、Files。
方法

getAsFile 空 如果kind是file，可以用該方法獲取到文件
getAsString 回調(diào)函數(shù) 如果kind是string，可以用該方法獲取到字符串，字符串需要用回調(diào)函數(shù)得到，回調(diào)函數(shù)的第一個(gè)參數(shù)就是剪切板中的字符串

dropEle.addEventListener("drop", function (e){
    var data = new FormData();
    var files = event.dataTransfer.files;
    var i = 0;
    var len = files.length;
    while (i < len){
        data.append("file" + i, files[i]);
         i++;
    }
    var xhr = new XMLHttpRequest();
    xhr.open("post", "/upload", true);
    xhr.onreadystatechange = function(){
         if (xhr.readyState == 4){
             alert(xhr.responseText);
         }
     };
     xhr.send(data);
});

阻止瀏覽器默認(rèn)打開(kāi)拖拽文件的行為：參考這里

window.addEventListener("drop",function(e){
  e = e || event;
  console.log(e);
  //e.preventDefault();
  if (e.target.tagName != "textarea") {  // check wich element is our target
    e.preventDefault();
  }  
},false);

理論知識(shí)說(shuō)完了。下面開(kāi)始實(shí)驗(yàn)改造codemirror

附Codemirror常用事件與方法
參考這里
1.onChange(instance,changeObj)：codeMirror文本被修改后觸發(fā)。
instance是一個(gè)當(dāng)前的codemirror對(duì)象，changeObj是一個(gè)｛from，to，text,removed｝對(duì)象。其中from，to分別表示起始行對(duì)象和結(jié)束行對(duì)象，行對(duì)象包括ch：改變位置距離行頭的間隔字符，line：改變的行數(shù)。text是一個(gè)字符串?dāng)?shù)組表示被修改的文本內(nèi)容，即你輸入的內(nèi)容。

2.onBeforeChange(instance,changObj):內(nèi)容改變前被調(diào)用
3.onCursorActivity(instance)：當(dāng)鼠標(biāo)點(diǎn)擊內(nèi)容區(qū)、選中內(nèi)容、修改內(nèi)容時(shí)被觸發(fā)
4.onKeyHandled:(instance,name,event):當(dāng)一個(gè)都dom元素的事件觸發(fā)時(shí)調(diào)用，name為操作名稱。
5.onInputRead(insatance,changeObj):當(dāng)一個(gè)新的input從隱藏的textara讀取出時(shí)調(diào)用
6.onBeforeSelectionChange(instance,obj):當(dāng)選中的區(qū)域被改變時(shí)調(diào)用，obj對(duì)象是選擇的范圍和改變的內(nèi)容（本人未測(cè)試成功）
7.onUpdate(instance):編輯器內(nèi)容被改變時(shí)觸發(fā)
8.onFocus(instance):編輯器獲得焦點(diǎn)式觸發(fā)
9.onBlur(instance):編輯器失去焦點(diǎn)時(shí)觸發(fā)

常用方法：
getValue():獲取編輯器文本內(nèi)容
setValue(text):設(shè)置編輯器文本內(nèi)容
getRange({line,ch},{line,ch}):獲取指定范圍內(nèi)的文本內(nèi)容第一個(gè)對(duì)象是起始坐標(biāo)，第二個(gè)是結(jié)束坐標(biāo)
replaceRange(replaceStr,{line,ch},{line,ch}):替換指定區(qū)域的內(nèi)容
getLine(line)：獲取指定行的文本內(nèi)容
lineCount():統(tǒng)計(jì)編輯器內(nèi)容行數(shù)
firstLine():獲取第一行行數(shù)，默認(rèn)為0，從開(kāi)始計(jì)數(shù)
lastLine():獲取最后一行行數(shù)
getLineHandle(line):根據(jù)行號(hào)獲取行句柄
getSelection():獲取鼠標(biāo)選中區(qū)域的代碼
replaceSelection(str):替換選中區(qū)域的代碼
setSelection({line:num,ch:num1},{line:num2,ch:num3}):設(shè)置一個(gè)區(qū)域被選中
somethingSelected()：判斷是否被選擇
getEditor()：獲取CodeMirror對(duì)像
undo()：撤銷
redo():回退

var simplemde = new SimpleMDE({ element: document.getElementById("MyID") });
simplemde.codemirror.on("drop", function(editor,e){
    ...
});
simplemde.codemirror.on("paste",function(editor,e){
...
});

為了使用WebUploader這個(gè)文件上傳組件，需要將粘貼得到的Blob對(duì)象轉(zhuǎn)為File對(duì)象。
Blob 對(duì)象是包含有只讀原始數(shù)據(jù)的類文件對(duì)象.File 接口基于 Blob，繼承了 Blob 的功能,并且擴(kuò)展支持用戶計(jì)算機(jī)上的本地文件。

var blob=new Blob();
var file = new File([blob], "image.png", {type:"image/png"});

File構(gòu)造器的第一個(gè)參數(shù)必須是數(shù)組

http://fex.baidu.com/webuploa...
創(chuàng)建Uploader對(duì)象

var uploader = WebUploader.Uploader({
    swf: "path_of_swf/Uploader.swf",
 
    // 開(kāi)起分片上傳。
    chunked: true
});

監(jiān)聽(tīng)fileQueued事件來(lái)實(shí)現(xiàn)進(jìn)度UI構(gòu)造:

// 當(dāng)有文件被添加進(jìn)隊(duì)列的時(shí)候
uploader.on( "fileQueued", function( file ) {
    var $list=$("#list");
    $list.append( "
" +
        "
" + file.name + "
" +
        "
等待上傳...
" +
    "
" );
});

文件上傳進(jìn)度:

// 文件上傳過(guò)程中創(chuàng)建進(jìn)度條實(shí)時(shí)顯示。
uploader.on( "uploadProgress", function( file, percentage ) {
    var $li = $( "#"+file.id ),
    $percent = $li.find(".progress .progress-bar");
    // 避免重復(fù)創(chuàng)建
    if ( !$percent.length ) {
        $percent = $("
" +
          "
" +
          "
" +
        "
").appendTo( $li ).find(".progress-bar");
    }
 
    $li.find("p.state").text("上傳中");
    $percent.css( "width", percentage * 100 + "%" );
});

文件成功、失敗處理:

uploader.on( "uploadSuccess", function( file,data ) {
    $( "#"+file.id ).find("p.state").text("已上傳");
});
 
uploader.on( "uploadError", function( file ) {
    $( "#"+file.id ).find("p.state").text("上傳出錯(cuò)");
});
 
uploader.on( "uploadComplete", function( file ) {
    $( "#"+file.id ).find(".progress").fadeOut();
});

添加文件到隊(duì)列并上傳:

uploader.addFiles( file ) 
uploader.addFiles( [file1, file2 …] ) 

開(kāi)始上傳:

uploader.upload() 
//uploader.upload( file | fileId)

其他參考：
js獲取剪切板內(nèi)容，js控制圖片粘貼
在線代碼編輯器 CODEMIRROR 事件說(shuō)明
javascript.ruanyifeng.com
https://developer.mozilla.org...