Editor.md和markdown实现Sg一样的截图粘贴上传

暂时我还没有把这个做成一个插件，只是简单的几行代码。其中原理就是通过截图后，ev.clipboardData 包含了text和图片文件 数据

原文链接：http://blog.oeynet.com/post/7...

seajs.use(["editormd"], function (editormd) {
            var editor = editormd({
                id: "post_content",
                height: 840,
                path: "/static/libs/editor.md/lib/",
                toolbarIcons: function () {
                    // Or return editormd.toolbarModes[name]; // full, simple, mini
                    // Using "||" set icons align right.
                    return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon", "||", "watch", "fullscreen", "preview", "testIcon"]
                },
                //toolbar  : false,             // 关闭工具栏
                codeFold: true,
                searchReplace: true,
                saveHTMLToTextarea: true,      // 保存 HTML 到 Textarea
                htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
                emoji: true,
                taskList: true,
                tocm: true,          // Using [TOCM]
                tex: true,                      // 开启科学公式 TeX 语言支持，默认关闭
                //previewCodeHighlight : false,  // 关闭预览窗口的代码高亮，默认开启
                flowChart: true,                // 疑似 Sea.js与 Raphael.js 有冲突，必须先加载 Raphael.js ，Editor.md 才能在 Sea.js 下正常进行；
                sequenceDiagram: true,          // 同上
                //dialogLockScreen : false,      // 设置弹出层对话框不锁屏，全局通用，默认为 true
                //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为 true
                //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为 true
                //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为 0.1
                //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为 #fff
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "{:url("api/uploader/uploadEditorImg?pic_type=10")}",
                onload: function () {
                    this.on("paste", function () {
                        console.log(1);
                    });
                }
            });


            /**
             * 咱贴上传图片
             */
            $("#post_content").on("paste", function (ev) {
                var data = ev.clipboardData;
                var items = (event.clipboardData || event.originalEvent.clipboardData).items;
                for (var index in items) {
                    var item = items[index];
                    if (item.kind === "file") {
                        var blob = item.getAsFile();
                        var reader = new FileReader();
                        reader.onload = function (event) {
                            var base64 = event.target.result;
                            //ajax上传图片
                            $.post("{:url("api/uploader/upEditorImg")}",{base:base64}, function (ret) {
                                layer.msg(ret.msg);
                                if (ret.code === 1) {
                                    //新一行的图片显示
                                    editor.insertValue("
![" + ret.data.title + "](" + ret.data.path + ")");
                                }
                            });
                        }; // data url!
                        var url = reader.readAsDataURL(blob);
                    }
                }
            });

        });

这是一个完整的示例，其中

$("#post_content") 便是监听paste事件

public function upEditorImg()
    {
        $token = Session::get("user_token");
        if (!$token || $token["id"] <= 0) {
            $this->error("对不起,您没有权限操作");
        }
        // 获取表单上传文件 例如上传了001.jpg
        $base64 = input("base");
        $savePath = Config::get("storage_path.editor");
        $file = Utils::saveBase642Img($base64, $savePath);
        if (!$file) {
            $this->result([], 500, "上传失败,请检查上传文件");
        }
        // 移动到框架应用根目录/public/uploads/ 目录下

        if ($file->check(["size" => 1024 * 1024 * 1, "ext" => "jpg,png,jpeg,gif"])) {
            $entity = [
                "create_time" => time(),
                "title" => $file->getInfo("name"),
                "size" => $file->getInfo("size"),
                "ext" => $file->getExtension(),
                "type" => $file->getInfo("type"),
                "path" => "/upload/editor" . $file->getInfo("build_path"),
                "md5" => $file->md5(),
                "uid" => $token["id"],
            ];
            $pic = new BbsPicture();
            $ret = $pic->insertGetId($entity);
            if (!$ret) {
                $this->result([], 500, "上传失败,请稍后重试");
            }
            $entity["title"] = "screenshots.{$entity["ext"]}";
            $this->result($entity, 1, "上传成功", "Json");
        } else {
            $this->result([], 0, $file->getError(), "Json");
        }
    }

PHP使用了ThinkPHP框架，其中Utils是个人封装的一个base64得

    /**
     * @param $content
     * @param $path
     * @return bool|File
     */
    static public function saveBase642Img($content, $path)
    {
        if (preg_match("/^(data:s*image/(w+);base64,)/", $content, $result)) {
            $type = $result[2];
            $file["type"] = "images/" . $type;
            $file["ext"] = $type;
            $file["save_path"] = $path . DS . date("Ymd") . DS;
            if (!is_dir($file["save_path"])) {
                mkdir($file["save_path"], 0777);
            }
            $file["data"] = base64_decode(str_replace($result[1], "", $content));
            $file["name"] = md5($file["data"]) . ".{$file["ext"]}";
            if (!file_put_contents($file["save_path"] . $file["name"], $file["data"])) {
                return false;
            }
            unset($file["data"]);
            $FILE = new File($file["save_path"] . $file["name"]);
            $file["size"] = $FILE->getSize();
            $file["saveName"] = $file["save_path"] . $file["name"];
            $file["build_path"] = DS . date("Ymd") . DS . $file["name"];

            $FILE->setUploadInfo($file);
            return $FILE;
        } else {
            return false;
        }
    }

https://www.w3.org/TR/clipboa...

https://developer.mozilla.org...