editormd，Markdown编辑器Editor.md图片粘贴插入插件的开发

电脑版发表于：2018/12/23 17:21

Markdown编辑器Editor.md图片粘贴插入的开发。最近发现编辑器图片上传很不方便，不能像其他编辑器一样粘贴插入图片，就着手为自己的编辑器加了这个功能，在这里分享给有需要的朋友。
*此文章代码仅供参考。用于开发环境时可根据自己需要进行修改。

>插件使用方法：使用截图工具截图保存之后，在编辑器里面粘贴/(ctrl+v)就可以实现自动上传图片了。

####1.创建插件文件
在plugins目录下创建 image-handle-paste/image-handle-paste.js文件。
![](https://img.tnblog.net/arcimg/aojiancc2/9802322821054064919c3431114950ad.png)

####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>
```

####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");
```

原文地址：https://www.codehui.net/info/39.html

剑轩

editormd，Markdown编辑器Editor.md图片粘贴插入插件的开发

{{item.title}}