Laravel項目中使用markdown編輯器及圖片粘貼上傳七牛雲

標籤：air   相關   []   pat   manager   公式   encode   qq   article   

本文為轉載，原文：http://www.chairis.cn/blog/article/15

Markdown

Markdown是一種可以使用普通文字編輯器編寫的標記語言，通過簡單的標記文法，它可以使普通常值內容具有一定的格式。
本次我們選用的編輯器是: Editor.md，官網中也有很詳細的介紹。從官網中下載安裝

下載的內容中，也有很多demo可以借鑒。
在下載的包中，去除一些多餘的內容，只保留我們需要的內容，然後加到項目的public目錄下，如紅色框內的內容：

項目中使用

在項目中使用editor.md編輯內容時，首先要先在blade模板中添加相對應的引用，css的引用如下：

<link rel="stylesheet" href="{{asset(‘editormd/editormd.min.css‘)}}">

js的引用如下：

<script src="{{asset(‘editormd/editormd.min.js‘)}}" type="text/javascript"></script>

然後在html中添加以下代碼，作為編輯器地區。

<div id="myeditormd">    <textarea style="display:none;"></textarea></div>

　　

最後在添加js代碼，載入出editor.md:

<script type="text/javascript">        var testEditor;        $(function () {            testEditor = editormd("myeditormd",{                width:"100%",                height:600,                syncScrolling:"single",                taskList : true,                tocm: true,                path:"{{asset(‘/editormd/lib/‘)}}" + "/",                tex:true,                flowChart       : true,                sequenceDiagram:true,                saveHTMLToTextarea : true,                imageUploadURL: "php/upload.php",            });        });</script>

　　

相關參數含義：

saveHTMLToTextarea: 儲存 HTML 到 Textarea
tex: 科學公式TeX語言支援，預設關閉
flowChart: 流程圖支援，預設關閉
sequenceDiagram: 時序/順序圖表支援，預設關閉
toolbar: 工具列，預設開啟
watch: 即時預覽，預設開啟

如此，便可完整的載入出編輯器了。效果如:

其中還有些比較重要的js方法。

testEditor.gotoLine(90);//跳轉至第90行testEditor.show();//顯示編輯器testEditor.hide;//隱藏編輯器testEditor.getMarkdown();//擷取markdown代碼testEditor.getHTML();//擷取markdown解析後的html代碼testEditor.watch();//開啟即時預覽testEditor.unwatch();//關閉即時預覽testEditor.previewing();//預覽testEditor.fullscreen();//全屏testEditor.showToolbar();//顯示工具列testEditor.hideToolbar();//隱藏工具列

在編輯器中編輯完內容後，一般情況下，儲存的是markdown標記。但是如何解析已儲存的markdown標記呢。

markdown解析

添加以下引用：

//css引用<link rel="stylesheet" href="{{asset(‘editormd/editormd.min.css‘)}}">//js引用<script src="{{asset(‘editormd/editormd.min.js‘)}}" type="text/javascript"></script><script src="{{asset(‘editormd/lib/marked.min.js‘)}}"></script><script src="{{asset(‘editormd/lib/prettify.min.js‘)}}"></script><script src="{{asset(‘editormd/lib/raphael.min.js‘)}}"></script><script src="{{asset(‘editormd/lib/underscore.min.js‘)}}"></script><script src="{{asset(‘editormd/lib/sequence-diagram.min.js‘)}}"></script><script src="{{asset(‘editormd/lib/flowchart.min.js‘)}}"></script><script src="{{asset(‘editormd/lib/jquery.flowchart.min.js‘)}}"></script>

然後在html中添加解析的地區

<div id="show_editor">    <textarea style="display: none">{{$article->content}}</textarea></div>

其中{{$article->content}}為資料庫中讀取的已儲存的markdown標記。
最後再添加響應的js代碼，便可完美解析了。

<script type="text/javascript">    $(function() {        var testEditormdView;        testEditormdView = editormd.markdownToHTML("show_editor", {            htmlDecode      : "style,script,iframe",  // you can filter tags decode            emoji           : true,            taskList        : true,            tex             : true,  // 預設不解析            flowChart       : true,  // 預設不解析            sequenceDiagram : true,  // 預設不解析        });    });</script>

解析後的效果如：

圖片粘貼上傳

首先分析一下實現步驟：

1. QQ後在編輯器中粘貼，肯定會有一個粘貼事件，即 paste 事件
2. 在事件回呼函數中對前端進行圖片的一次壓縮
3. 前端壓縮多是使用canvas，返回的是base64，這裡我使用了一個 localResizeIMG.js的外掛程式
4. 將產生好的base64傳給後台，後台可以進行圖片的第二次壓縮，但是感覺沒必要

5. 後台先得到七牛雲的upToken，即一個上傳的憑證，然後執行七牛sdk提供的上傳函數

   paste事件

   之後，在富文字編輯器中右鍵黏貼或者CTRL V就會觸發這個事件，這個事件有一個clipboardData屬性。我們需要使用js代碼監聽paste事件，並擷取clipboardData屬性，代碼如下：

   1. function paste(event) {         var clipboardData = event.clipboardData;         var items, item, types;         if (clipboardData) {             items = clipboardData.items;             if (!items) {                 return;             }             // 儲存在剪貼簿中的資料類型             types = clipboardData.types || [];             for (var i = 0; i < types.length; i++) {                 if (types[i] === ‘Files‘) {                     item = items[i];                     break;                 }             }             // 判斷是否為圖片資料             if (item && item.kind === ‘file‘ && item.type.match(/^image\//i)) {                 // 讀取該圖片                 var file = item.getAsFile(),                         reader = new FileReader();                 reader.readAsDataURL(file);                 reader.onload = function () {                     //前端壓縮                     lrz(reader.result, {width: 1080}).then(function (res) {                         $.ajax({                             url: "{{asset(‘php-sdk/myapis/uploadImageToQiliu.php‘)}}",                             type: ‘post‘,                             data: {                                 "image": res.base64,                                 "name": new Date().getTime() + ".png"                             },                             contentType: ‘application/x-www-form-urlencoded;charest=UTF-8‘,                             success: function (data) {                                 var imageName;                                 try {                                     imageName = JSON.parse(data).key;                                 } catch (e) {                                     alert(e.toString);                                 }                                 var qiniuUrl = ‘![](http://opgmvuzyu.bkt.clouddn.com/‘ + imageName + ‘)‘;                                 testEditor.insertValue(qiniuUrl);                             }                         })                     });                 }             }         }     }     document.addEventListener(‘paste‘, function (event) {         paste(event);     })

      　　

      

   前端壓縮

   前端壓縮使用的是localResizeIMG.js外掛程式。
   相容IE10以上，所以還得做個IE版本判斷，然後看自己是否需要使用幹這個外掛程式，我這裡就不寫IE的判斷了。
   使用方法也很簡單，lrz方法接受一個檔案路徑或者base64的圖片，可以設定一個壓縮寬度的對象，低於這個寬度的圖片不會壓縮，大於這個寬度的就會壓縮，然後在then方法中取得壓縮後的圖片：
   得先引入這個外掛程式，可以使用src引入，也支援amd or cmd模組化

   1. <script src="{{asset(‘js/lrz.bundle.js‘)}}" type="text/javascript"></script>

   開始使用：

   1. //image就是經過paste事件後得到的圖片lrz(image, {width: 1080}).then(function (res) { var base64 = res.base64;}

   七牛雲sdk

   七牛雲註冊好像就送10G的雲儲存，需要的可以去註冊，先下載七牛雲sdk，我使用的是php，地址https://developer.qiniu.com/kodo/sdk/php
   配置這個上傳的檔案也很簡單。將下載後的壓縮包解壓，刪掉一下沒用的檔案，然後拖到項目中：
   
   uploadImageToQiliu.php檔案是自己新增的，代碼如下：

   1. <?phprequire_once __DIR__ . ‘/../autoload.php‘;use Qiniu\Auth;// 引入上傳類use Qiniu\Storage\UploadManager;$accessKey = ‘你的accessKey‘;$secretKey = ‘你的secretKey‘;// 初始化簽權對象。$auth = new Auth($accessKey, $secretKey);$bucket = "空間名字";$upToken = $auth->uploadToken($bucket);// 初始化 UploadManager 對象並進行檔案的上傳。$uploadMgr = new UploadManager();$key = $_POST[‘name‘];$filePath = $_POST[‘image‘];list($ret, $err) = $uploadMgr->putFile($upToken, $key, $filePath);if ($err !== null) { echo json_encode($err);} else { echo json_encode($ret);}

   accessKey和secretKey註冊後就可以看到，bucket是雲儲存空間名字。
   接下來是前台傳圖片和圖片名給後台，圖片名我就直接用 new Date().getTime() 了。

   1. $.ajax({ url: "{{asset(‘php-sdk/myapis/uploadImageToQiliu.php‘)}}", type: ‘post‘, data: {     "image": res.base64,     "name": new Date().getTime() + ".png" }, contentType: ‘application/x-www-form-urlencoded;charest=UTF-8‘, success: function (data) {     var imageName;     try {         imageName = JSON.parse(data).key;     } catch (e) {         alert(e.toString);     }     var qiniuUrl = ‘![](http://opgmvuzyu.bkt.clouddn.com/‘ + imageName + ‘)‘;    testEditor.insertValue(qiniuUrl); }})

   testEditor 是我使用的markdown編輯器的對象執行個體，testEditor.insertValue(qiniuUrl);就是把格式化好的markdown語句插到游標處。
   整個前端代碼如下：

   1. <script type="text/javascript">     function paste(event) {         var clipboardData = event.clipboardData;         var items, item, types;         if (clipboardData) {             items = clipboardData.items;             if (!items) {                 return;             }             // 儲存在剪貼簿中的資料類型             types = clipboardData.types || [];             for (var i = 0; i < types.length; i++) {                 if (types[i] === ‘Files‘) {                     item = items[i];                     break;                 }             }             // 判斷是否為圖片資料             if (item && item.kind === ‘file‘ && item.type.match(/^image\//i)) {                 // 讀取該圖片                 var file = item.getAsFile(),                         reader = new FileReader();                 reader.readAsDataURL(file);                 reader.onload = function () {                     //前端壓縮                     lrz(reader.result, {width: 1080}).then(function (res) {                         $.ajax({                             url: "{{asset(‘php-sdk/myapis/uploadImageToQiliu.php‘)}}",                             type: ‘post‘,                             data: {                                 "image": res.base64,                                 "name": new Date().getTime() + ".png"                             },                             contentType: ‘application/x-www-form-urlencoded;charest=UTF-8‘,                             success: function (data) {                                 var imageName;                                 try {                                     imageName = JSON.parse(data).key;                                 } catch (e) {                                     alert(e.toString);                                 }                                 var qiniuUrl = ‘![](http://opgmvuzyu.bkt.clouddn.com/‘ + imageName + ‘)‘;                                 testEditor.insertValue(qiniuUrl);                             }                         })                     });                 }             }         }     }     document.addEventListener(‘paste‘, function (event) {         paste(event);     }) </script>

   再編輯器中粘貼完圖片的效果如下：
   

完

Laravel項目中使用markdown編輯器及圖片粘貼上傳七牛雲