给 Markdown 编辑器 Editor.md 添加图片复制粘贴自动上传功能

当我们使用Markdown编辑器 editor.md, 若想上传其他站点的图片需要将图片下载本地，然后 在editor.md 点击文件上传按钮进行上传，这样比较麻烦，我们希望可以在其他站点右键复制图片，在 editor.md 粘贴自动上传，这样就会方便很多。接下来我们看一下如何实现图片复制粘贴自动上传功能。

1、创建图片黏贴自动上传插件

在 editormd/plugins/ 目录下创建 image-handle-paste/image-handle-paste.js 文件。

插件里面的方法大体逻辑是将粘贴板的图片添加到一个 FormData 里面，然后使用 ajax 进行提交上传的，上传完成调编辑器自带的图片 dialog 进行插入。里面预留了 blob 对象和 base64 格式的图片方法，根据自己需求自取。

/*!
 * editormd图片粘贴上传插件
 *
 * @file   image-handle-paste.js
 * @author zhangkaixing
 * @date   2019-09-23
 * @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 || items[1].type.indexOf('image') > -1)) {
                    if (items[0].type.indexOf('image') > -1 ) {
                        var file = items[0].getAsFile(); // 获取从电脑拷贝的图片
                    } else {
                        var file = items[1].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"); // 文件
                    forms.append("_method", 'POST' );

                    //调用imageDialog插件，弹出对话框
                    _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,
                "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);
    }

})();

图片上传接口返回的数据要求如下

{
    success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
    message : "提示的信息，上传成功或上传失败及错误信息等。",
    url     : "图片地址"        // 上传成功时才返回
}

插件的调用

<!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>

参考文档：

https://learnku.com/articles/38067

https://github.com/pandao/editor.md/pull/829