Laravel editor.md 支援截圖 / 貼上上傳圖片

xingkong12138發表於2019-12-14
Laravel

在我們日常網站搭建中，很多時候都會使用到富文字編輯器，比如比較常用的百度富文字編輯器，但今天推薦一款富文字編輯器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>

相關文章