kindeditor 富文本直接粘貼圖片功能實現


實例代碼如下:

afterCreate: function () {
var editerDoc = this.edit.doc;//得到編輯器的文檔對象
//監聽粘貼事件, 包括右鍵粘貼和ctrl+v
$(editerDoc).bind('paste', null, function (e) {
/*獲得操作系統剪切板里的項目,e即kindeditor,
*kindeditor創建了originalEvent(源事件)對象,
*並指向了瀏覽器的事件對象,而chrome瀏覽器
*需要通過clipboardData(剪貼板數據)對象的items
*獲得復制的圖片數據。
*/
var ele = e.originalEvent.clipboardData.items;
for (var i = 0; i < ele.length; ++i) {
//判斷文件類型
if (ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1) {
var file = ele[i].getAsFile();//得到二進制數據
//創建表單對象,建立name=value的表單數據。
var formData = new FormData();
formData.append("imgFile", file);//name,value

//用jquery Ajax 上傳二進制數據
$.ajax({
url: '../Include/upload_ajax.ashx?action=EditorFile&IsWater=1',
type: 'POST',
data: formData,
// 告訴jQuery不要去處理發送的數據
processData: false,
// 告訴jQuery不要去設置Content-Type請求頭
contentType: false,
dataType: "json",
beforeSend: function () {
//console.log("正在進行,請稍候");
},
success: function (responseStr) {
//上傳完之后,生成圖片標簽回顯圖片,假定服務器返回url。
var src = responseStr.url;
var imgTag = "<img src='" + src + "' border='0'/>";

//console.info(imgTag);
//kindeditor提供了一個在焦點位置插入HTML的函數,調用此函數即可。
editor.insertHtml(imgTag);


},
error: function (responseStr) {
console.log("error");
}
});

}

}
}
)
}

//////////////////////////////////////代碼結束

///////代碼粘貼位置

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM