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

在我们日常网站搭建中,很多时候都会使用到富文本编辑器,比如比较常用的百度富文本编辑器,但今天推荐一款富文本编辑器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>
本作品采用《CC 协议》,转载必须注明作者和本文链接
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 2

感谢分享 已在项目中使用

4年前 评论

感谢分享,我也用在了项目中,并改了代码,json组装回调信息用两层好像会报错哦?另外还改了点东西 boywithacoin.cn/article/editor-md-... 另外使用此插件给django-mdeditor项目和editor.md项目提了pr

3年前 评论
xingkong12138 (楼主) 3年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!