Laravel editor.md 支持截图 / 粘贴上传图片

xingkong12138 的个人博客 / 1 / 2 / 创建于 5年前

在我们日常网站搭建中，很多时候都会使用到富文本编辑器，比如比较常用的百度富文本编辑器，但今天推荐一款富文本编辑器editor.md,这个编辑器贼好用，而且插件开发非常方便，但就是文档支持不好o(╥﹏╥)o。

官网：https://pandao.github.io/editor.md/example...

下面进入正题：

该文章仅供参考。用于开发环境时可根据自己需要进行修改。
插件使用方法：使用截图工具截图保存之后，在编辑器里面粘贴/(ctrl+v)就可以实现自动上传图片了。

1. 创建插件文件

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

2.插件内容

插件里面的方法大体逻辑是将粘贴板的图片添加到一个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) {

                    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"); // 文件

                    //调用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(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']。

默认返回的数据格式（可以自定义）

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

laravel editor.md