暫時(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
暫時(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...
摘要:之前的編輯器一直用的是但是問(wèn)題也不少之后覺(jué)得換成編輯器首選當(dāng)然就是主要原因就是界面美觀功能全面但是問(wèn)題也有比如圖片上傳不知道為什么作者會(huì)用那么蛋疼的表單上傳難道只是為了兼容看了上的維護(hù)時(shí)間最后一次維護(hù)差不多半年了想讓作者來(lái)改可能性是不大了那 之前的編輯器一直用的是simditor, 但是問(wèn)題也不少, 之后覺(jué)得換成markdown編輯器, 首選當(dāng)然就是editor.md, 主要原因就是界...
摘要:總結(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)在終于下決...
摘要:什么是是一款在線編輯器,她不僅免費(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ā)...
摘要:上一篇前端常用插件工具類庫(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ā)分享給身邊的小伙伴,以后遇到...
閱讀 3227·2021-11-25 09:43
閱讀 3221·2021-11-23 09:51
閱讀 3532·2019-08-30 13:08
閱讀 1585·2019-08-29 12:48
閱讀 3606·2019-08-29 12:26
閱讀 414·2019-08-28 18:16
閱讀 2578·2019-08-26 13:45
閱讀 2445·2019-08-26 12:15