Markdown编辑器Editor.md图片粘贴插入的开发。最近发现编辑器图片上传很不方便，不能像其他编辑器一样粘贴插入图片，就着手为自己的编辑器加了这个功能，在这里分享给有需要的朋友。
原文地址：代码汇个人博客 http://www.codehui.net/info/39.html
此文章代码仅供参考。用于开发环境时可根据自己需要进行修改。
没有使用过Editor.md的朋友请移步 : https://github.com/pandao/editor.md插件使用方法：使用截图工具截图保存之后，在编辑器里面粘贴/(ctrl+v)就可以实现自动上传图片了。
1. 创建插件文件
在plugins目录下创建 image-handle-paste/image-handle-paste.js文件。
2. 插件的内容
这个方法里面是将粘贴板的图片添加到一个FormData里面，然后使用ajax进行提交上传的，上传完成调编辑器自带的图片dialog进行插入。里面预留了blob对象和base64格式的图片方法，根据自己需求自取。
/*!
* 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;
}
//监听粘贴板事件
$('#' + 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
}
*/
// 创建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']
默认返回数据格式(修改_ajax方法回调即可)
{
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() {
// 引入插件 执行监听方法
editormd.loadPlugin("../plugins/image-handle-paste/image-handle-paste", function(){
testEditor.imagePaste();
});
}
});
</script>
</body>
</html>
效果预览
45dd8a12969aa603671f60a9878c6683.gif
4. 插件的引用方法
插件引用有三种方法都可以用。
-
第一种
editormd.loadPlugin('插件文件路径','回调函数')
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("要执行的插件方法名",插件地址)
this.executePlugin("imagePaste", "image-handle-paste/image-handle-paste");
