暫時我還沒有把這個做成一個插件,只是簡單的幾行代碼。其中原理就是通過截圖后,ev.clipboardData 包含了text和圖片文件 數據
原文鏈接:http://blog.oeynet.com/post/7...
1.Js監聽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, // 關閉工具欄 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事件2.PHP處理
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...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87406.html
暫時我還沒有把這個做成一個插件,只是簡單的幾行代碼。其中原理就是通過截圖后,ev.clipboardData 包含了text和圖片文件 數據 原文鏈接:http://blog.oeynet.com/post/7... showImg(https://segmentfault.com/img/remote/1460000010776970); 1.Js監聽paste事件 seajs.use([edi...
摘要:之前的編輯器一直用的是但是問題也不少之后覺得換成編輯器首選當然就是主要原因就是界面美觀功能全面但是問題也有比如圖片上傳不知道為什么作者會用那么蛋疼的表單上傳難道只是為了兼容看了上的維護時間最后一次維護差不多半年了想讓作者來改可能性是不大了那 之前的編輯器一直用的是simditor, 但是問題也不少, 之后覺得換成markdown編輯器, 首選當然就是editor.md, 主要原因就是界...
摘要:總結如果你在為公司尋找一款開源免費的開發文檔文檔管理工具,不妨考慮一下項目,一定不會讓你失望的。 Wizard 是一款開源文檔管理系統,項目地址為 https://github.com/mylxsw/wizard。這個項目是 我 在2017年就開始開發的,起初只是想做一款能夠在公司內部把Swagger文檔管理起來的工具,但在這近兩年的時間里,一直斷斷續續的為其添加各種功能,現在終于下決...
摘要:什么是是一款在線編輯器,她不僅免費開源,而且簡單適用。適用于編寫臨時文檔與在線分享。演示地址演示圖片源碼地址 Markdown-Temp 什么是Markdown-Temp? Markdown-Temp是一款在線Markdown編輯器,她不僅免費開源,而且簡單適用。Markdown-Temp適用于編寫臨時文檔與在線分享。 Markdown-Temp說明 編輯器使用Editor.md開發...
摘要:上一篇前端常用插件工具類庫匯總上內容摘要動畫庫滾動庫輪播圖滾屏彈出框消息通知下拉框級聯選擇器顏色選擇器時間日期處理表單驗證分頁插件本篇延續上一篇的內容繼續給大家帶來一系列關于前端插件工具類的內容。 showImg(https://segmentfault.com/img/bVbjsMh?w=900&h=383); 前言 對本文感興趣可以先加個收藏,也可以轉發分享給身邊的小伙伴,以后遇到...
閱讀 3201·2021-11-25 09:43
閱讀 3206·2021-11-23 09:51
閱讀 3519·2019-08-30 13:08
閱讀 1569·2019-08-29 12:48
閱讀 3594·2019-08-29 12:26
閱讀 397·2019-08-28 18:16
閱讀 2562·2019-08-26 13:45
閱讀 2429·2019-08-26 12:15