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

時間  2019-11-10
標籤 laravel 項目 使用 markdown 編輯器 圖片 粘貼 上傳 七牛 7牛 欄目 Markdown 简体版
原文   原文鏈接

本文爲轉載，原文：Laravel項目中使用markdown編輯器及圖片粘貼上傳七牛雲javascript

Markdown

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

下載的內容中，也有不少demo能夠借鑑。
在下載的包中，去除一些多餘的內容，只保留咱們須要的內容，而後加到項目的public目錄下，以下圖紅色框內的內容：
php

項目中使用

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

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

js的引用以下：html

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

而後在html中添加如下代碼，做爲編輯器區域。前端

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

　　

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

<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>

　　

相關參數含義：jquery

saveHTMLToTextarea: 保存 HTML 到 Textarea
tex: 科學公式TeX語言支持，默認關閉
flowChart: 流程圖支持，默認關閉
sequenceDiagram: 時序/序列圖支持，默認關閉
toolbar: 工具欄，默認開啓
watch: 實時預覽，默認開啓git

如此，即可完整的加載出編輯器了。效果以下圖:

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

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標記呢。ajax

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. <?php
require_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>

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

完

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程