思路解析：監(jiān)聽paste事件蹬铺，判斷剪貼板的內(nèi)容察纯，如果是圖片類型闸拿，使用xmlhttprequest上傳到服務(wù)器污桦，并在文本框中將圖片返回的url改為markdown格式亩歹。
html
<textarea style="height: 220px; width:200px;resize: none; box-shadow: none; border: 1px solid black;" id="content"></textarea>
首先監(jiān)聽paste事件
$('#content').on("paste",function(e){
});
獲得剪貼板的內(nèi)容，chrome瀏覽器通過e.originalEvent.clipboardData獲得凡橱；IE瀏覽器通過window.clipboardData獲得小作。
$('#content').on("paste",function(e){
//判斷圖片類型的正則
var isImage=(/.jpg$|.jpeg$|.png$|.gif$/i);
var e = e || event;
//IE支持window.clipboardData,chrome支持e.originalEvent.clipboardData
var clipboardData = e.originalEvent.clipboardData || window.clipboardData;
if(!(clipboardData&&clipboardData.items)){
return;
}
});
通過item.kind和type屬性判斷剪貼板的內(nèi)容是不是圖片
//判斷圖片類型的正則
var isImage=(/.jpg$|.jpeg$|.png$|.gif$/i);
for(var i=0,length=clipboardData.items.length;i<length;i++){
var item=clipboardData.items[i];
if(item.kind==='file'&&isImage.test(item.type)){
img=item.getAsFile();
}
通過getAsFile()就拿到了圖片文件
image.png
通過FormData將圖片文件上傳到服務(wù)器
//服務(wù)器地址
var url='/common/upload';
var contentE=$('#content');
var formData=new FormData();
//將得到的圖片文件添加到FormData
formData.append('file',img);
//上傳圖片
var xhr=new XMLHttpRequest();
//上傳結(jié)束
xhr.onload=function () {
var data=JSON.parse(xhr.responseText);
//console.log(data)
if (data.code === 200) {
if (contentE.val().length === 0) {
//轉(zhuǎn)換成markdown格式，插入到光標(biāo)處
contentE.insertAtCousor("![image](" + data.detail + ")\r\n");
} else {
contentE.insertAtCousor("\r\n![image](" +
data.detail + ")");
}
var currentPosition = contentE.getSelectionEnd();
contentE.setSelection(currentPosition);
}
}
xhr.open('POST',url,true);
xhr.send(formData);
//當(dāng)剪貼板里是圖片時(shí)稼钩，禁止默認(rèn)的粘貼
return false;
服務(wù)器響應(yīng)內(nèi)容
image.png
實(shí)現(xiàn)效果
image.png
貼一下完整代碼
/*smc 2018.12.26 圖片粘貼功能實(shí)現(xiàn)*/
$('#content').on("paste",function(e){
//判斷圖片類型的正則
var isImage=(/.jpg$|.jpeg$|.png$|.gif$/i);
var e = e || event;
var contentE=$('#content');
var img=null;
//IE支持window.clipboardData,chrome支持e.originalEvent.clipboardData
var clipboardData = e.originalEvent.clipboardData || window.clipboardData;
if(!(clipboardData&&clipboardData.items)){
return;
}
for(var i=0,length=clipboardData.items.length;i<length;i++){
var item=clipboardData.items[i];
if(item.kind==='file'&&isImage.test(item.type)){
img=item.getAsFile();
var url='/common/upload';
var formData=new FormData();
formData.append('file',img);
//上傳圖片
var xhr=new XMLHttpRequest();
//上傳結(jié)束
xhr.onload=function () {
var data=JSON.parse(xhr.responseText);
//console.log(data)
if (data.code === 200) {
if (contentE.val().length === 0) {
contentE.insertAtCousor("![image](" + data.detail + ")\r\n");
} else {
contentE.insertAtCousor("\r\n![image](" + data.detail + ")");
}
var currentPosition = contentE.getSelectionEnd();
contentE.setSelection(currentPosition);
}
}
xhr.open('POST',url,true);
xhr.send(formData);
//當(dāng)剪貼板里是圖片時(shí)顾稀，禁止默認(rèn)的粘貼
return false;
}
}
});
/*smc 2018.12.26 end*/
