成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Editor.md和markdown實(shí)現(xiàn)Sg一樣的截圖粘貼上傳

weij / 2256人閱讀

暫時(shí)我還沒(méi)有把這個(gè)做成一個(gè)插件,只是簡(jiǎn)單的幾行代碼。其中原理就是通過(guò)截圖后,ev.clipboardData 包含了text和圖片文件 數(shù)據(jù)

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

1.Js監(jiān)聽(tīng)paste事件
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,             // 關(guān)閉工具欄
                codeFold: true,
                searchReplace: true,
                saveHTMLToTextarea: true,      // 保存 HTML 到 Textarea
                htmlDecode: "style,script,iframe|on*",            // 開(kāi)啟 HTML 標(biāo)簽解析,為了安全性,默認(rèn)不開(kāi)啟
                emoji: true,
                taskList: true,
                tocm: true,          // Using [TOCM]
                tex: true,                      // 開(kāi)啟科學(xué)公式 TeX 語(yǔ)言支持,默認(rèn)關(guān)閉
                //previewCodeHighlight : false,  // 關(guān)閉預(yù)覽窗口的代碼高亮,默認(rèn)開(kāi)啟
                flowChart: true,                // 疑似 Sea.js與 Raphael.js 有沖突,必須先加載 Raphael.js ,Editor.md 才能在 Sea.js 下正常進(jìn)行;
                sequenceDiagram: true,          // 同上
                //dialogLockScreen : false,      // 設(shè)置彈出層對(duì)話框不鎖屏,全局通用,默認(rèn)為 true
                //dialogShowMask : false,     // 設(shè)置彈出層對(duì)話框顯示透明遮罩層,全局通用,默認(rèn)為 true
                //dialogDraggable : false,    // 設(shè)置彈出層對(duì)話框不可拖動(dòng),全局通用,默認(rèn)為 true
                //dialogMaskOpacity : 0.4,    // 設(shè)置透明遮罩層的透明度,全局通用,默認(rèn)值為 0.1
                //dialogMaskBgColor : "#000", // 設(shè)置透明遮罩層的背景顏色,全局通用,默認(rèn)為 #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);
                    }
                }
            });

        });

這是一個(gè)完整的示例,其中

$("#post_content") 便是監(jiān)聽(tīng)paste事件
2.PHP處理
public function upEditorImg()
    {
        $token = Session::get("user_token");
        if (!$token || $token["id"] <= 0) {
            $this->error("對(duì)不起,您沒(méi)有權(quán)限操作");
        }
        // 獲取表單上傳文件 例如上傳了001.jpg
        $base64 = input("base");
        $savePath = Config::get("storage_path.editor");
        $file = Utils::saveBase642Img($base64, $savePath);
        if (!$file) {
            $this->result([], 500, "上傳失敗,請(qǐng)檢查上傳文件");
        }
        // 移動(dòng)到框架應(yīng)用根目錄/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, "上傳失敗,請(qǐng)稍后重試");
            }
            $entity["title"] = "screenshots.{$entity["ext"]}";
            $this->result($entity, 1, "上傳成功", "Json");
        } else {
            $this->result([], 0, $file->getError(), "Json");
        }
    }

PHP使用了ThinkPHP框架,其中Utils是個(gè)人封裝的一個(gè)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...

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/87406.html

相關(guān)文章

  • Editor.mdmarkdown實(shí)現(xiàn)Sg一樣截圖粘貼上傳

    暫時(shí)我還沒(méi)有把這個(gè)做成一個(gè)插件,只是簡(jiǎn)單的幾行代碼。其中原理就是通過(guò)截圖后,ev.clipboardData 包含了text和圖片文件 數(shù)據(jù) 原文鏈接:http://blog.oeynet.com/post/7... showImg(https://segmentfault.com/img/remote/1460000010776970); 1.Js監(jiān)聽(tīng)paste事件 seajs.use([edi...

    jollywing 評(píng)論0 收藏0
  • 如何將editor.md圖片上傳改成七牛?

    摘要:之前的編輯器一直用的是但是問(wèn)題也不少之后覺(jué)得換成編輯器首選當(dāng)然就是主要原因就是界面美觀功能全面但是問(wèn)題也有比如圖片上傳不知道為什么作者會(huì)用那么蛋疼的表單上傳難道只是為了兼容看了上的維護(hù)時(shí)間最后一次維護(hù)差不多半年了想讓作者來(lái)改可能性是不大了那 之前的編輯器一直用的是simditor, 但是問(wèn)題也不少, 之后覺(jué)得換成markdown編輯器, 首選當(dāng)然就是editor.md, 主要原因就是界...

    sourcenode 評(píng)論0 收藏0
  • Wizard 開(kāi)源文檔管理系統(tǒng)1.0發(fā)布啦

    摘要:總結(jié)如果你在為公司尋找一款開(kāi)源免費(fèi)的開(kāi)發(fā)文檔文檔管理工具,不妨考慮一下項(xiàng)目,一定不會(huì)讓你失望的。 Wizard 是一款開(kāi)源文檔管理系統(tǒng),項(xiàng)目地址為 https://github.com/mylxsw/wizard。這個(gè)項(xiàng)目是 我 在2017年就開(kāi)始開(kāi)發(fā)的,起初只是想做一款能夠在公司內(nèi)部把Swagger文檔管理起來(lái)的工具,但在這近兩年的時(shí)間里,一直斷斷續(xù)續(xù)的為其添加各種功能,現(xiàn)在終于下決...

    cod7ce 評(píng)論0 收藏0
  • Markdown-Temp,一款免費(fèi)開(kāi)源編輯器(附源碼)

    摘要:什么是是一款在線編輯器,她不僅免費(fèi)開(kāi)源,而且簡(jiǎn)單適用。適用于編寫(xiě)臨時(shí)文檔與在線分享。演示地址演示圖片源碼地址 Markdown-Temp 什么是Markdown-Temp? Markdown-Temp是一款在線Markdown編輯器,她不僅免費(fèi)開(kāi)源,而且簡(jiǎn)單適用。Markdown-Temp適用于編寫(xiě)臨時(shí)文檔與在線分享。 Markdown-Temp說(shuō)明 編輯器使用Editor.md開(kāi)發(fā)...

    JerryC 評(píng)論0 收藏0
  • 前端常用插件、工具類庫(kù)匯總(下)

    摘要:上一篇前端常用插件工具類庫(kù)匯總上內(nèi)容摘要?jiǎng)赢?huà)庫(kù)滾動(dòng)庫(kù)輪播圖滾屏彈出框消息通知下拉框級(jí)聯(lián)選擇器顏色選擇器時(shí)間日期處理表單驗(yàn)證分頁(yè)插件本篇延續(xù)上一篇的內(nèi)容繼續(xù)給大家?guī)?lái)一系列關(guān)于前端插件工具類的內(nèi)容。 showImg(https://segmentfault.com/img/bVbjsMh?w=900&h=383); 前言 對(duì)本文感興趣可以先加個(gè)收藏,也可以轉(zhuǎn)發(fā)分享給身邊的小伙伴,以后遇到...

    ideaa 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

weij

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<