Markdown編輯器Editor.md圖片粘貼插入的開發(fā)舔庶。最近發(fā)現(xiàn)編輯器圖片上傳很不方便，不能像其他編輯器一樣粘貼插入圖片，就著手為自己的編輯器加了這個功能括儒，在這里分享給有需要的朋友。
原文地址：代碼匯個人博客 http://www.codehui.net/info/39.html
此文章代碼僅供參考锐想。用于開發(fā)環(huán)境時可根據(jù)自己需要進行修改帮寻。
沒有使用過Editor.md的朋友請移步 : https://github.com/pandao/editor.md插件使用方法：使用截圖工具截圖保存之后，在編輯器里面粘貼/(ctrl+v)就可以實現(xiàn)自動上傳圖片了赠摇。
1. 創(chuàng)建插件文件
在plugins目錄下創(chuàng)建 image-handle-paste/image-handle-paste.js文件固逗。
2. 插件的內(nèi)容
這個方法里面是將粘貼板的圖片添加到一個FormData里面，然后使用ajax進行提交上傳的藕帜，上傳完成調(diào)編輯器自帶的圖片dialog進行插入烫罩。里面預(yù)留了blob對象和base64格式的圖片方法，根據(jù)自己需求自取洽故。
/*!
* editormd圖片粘貼上傳插件
*
* @file image-handle-paste.js
* @author codehui
* @date 2018-11-07
* @link https://www.codehui.net
*/
(function() {
var factory = function (exports) {
var $ = jQuery; // if using module loader(Require.js/Sea.js).
var pluginName = "image-handle-paste"; // 定義插件名稱
//圖片粘貼上傳方法
exports.fn.imagePaste = function() {
var _this = this;
var cm = _this.cm;
var settings = _this.settings;
var editor = _this.editor;
var classPrefix = _this.classPrefix;
var id = _this.id;
if(!settings.imageUpload || !settings.imageUploadURL){
console.log('你還未開啟圖片上傳或者沒有配置上傳地址');
return false;
}
//監(jiān)聽粘貼板事件
$('#' + id).on('paste', function (e) {
var items = (e.clipboardData || e.originalEvent.clipboardData).items;
//判斷圖片類型
if (items && items[0].type.indexOf('image') > -1) {
var file = items[0].getAsFile();
/*生成blob
var blobImg = URL.createObjectURL(file);
*/
/*base64
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var base64Img = e.target.result //圖片的base64
}
*/
// 創(chuàng)建FormData對象進行ajax上傳
var forms = new FormData(document.forms[0]); //Filename
forms.append(classPrefix + "image-file", file, "file_"+Date.parse(new Date())+".png"); // 文件
_this.executePlugin("imageDialog", "image-dialog/image-dialog");
_ajax(settings.imageUploadURL, forms, function(ret){
if(ret.success == 1){
$("." + classPrefix + "image-dialog").find("input[data-url]").val(ret.url);
//cm.replaceSelection("![](" + ret.url + ")");
}
console.log(ret.message);
})
}
})
};
// ajax上傳圖片 可自行處理
var _ajax = function(url, data, callback) {
$.ajax({
"type": 'post',
"cache": false,
"url": url,
"data": data,
"dateType": "json",
"processData": false,
"contentType": false,
"mimeType": "multipart/form-data",
success: function(ret){
callback(JSON.parse(ret));
},
error: function (err){
console.log('請求失敗')
}
})
}
};
// CommonJS/Node.js
if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
{
module.exports = factory;
}
else if (typeof define === "function") // AMD/CMD/Sea.js
{
if (define.amd) { // for Require.js
define(["editormd"], function(editormd) {
factory(editormd);
});
} else { // for Sea.js
define(function(require) {
var editormd = require("./../../editormd");
factory(editormd);
});
}
}
else
{
factory(window.editormd);
}
})();
后端接收file方法為
$_FILES['editormd-image-file']
默認返回數(shù)據(jù)格式(修改_ajax方法回調(diào)即可)
{
success : 0 | 1, // 0 表示上傳失敗贝攒，1 表示上傳成功
message : "提示的信息，上傳成功或上傳失敗及錯誤信息等时甚。",
url : "圖片地址" // 上傳成功時才返回
}
3. 頁面引用插件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>editormd圖片粘貼上傳插件</title>
<link rel="stylesheet" href="../css/editormd.css" />
</head>
<body>
<div id="test-editormd">
<textarea style="display:none;"></textarea>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor = editormd("test-editormd", {
path: '../lib/',
imageUpload: true, //開啟圖片上傳
imageUploadURL: '/logic/upload', //圖片上傳后臺地址
onload: function() {
// 引入插件 執(zhí)行監(jiān)聽方法
editormd.loadPlugin("../plugins/image-handle-paste/image-handle-paste", function(){
testEditor.imagePaste();
});
}
});
</script>
</body>
</html>
效果預(yù)覽
45dd8a12969aa603671f60a9878c6683.gif
4. 插件的引用方法
插件引用有三種方法都可以用隘弊。
-
第一種
editormd.loadPlugin('插件文件路徑','回調(diào)函數(shù)')
editormd.loadPlugin("../plugins/image-handle-paste/image-handle-paste", function(){
testEditor.imagePaste();
});
- 第二種
//引入插件
<script src="../plugins/image-handle-paste/image-handle-paste.js"></script>
//使用
testEditor.imagePaste();
- 第三種
editormd.loadPlugin("要執(zhí)行的插件方法名",插件地址)
this.executePlugin("imagePaste", "image-handle-paste/image-handle-paste");
