Laravel5 Markdown 編輯器使用教程

Laravel 5 Markdown 編輯器使用教程

5月18號發佈的這個擴展，好多朋友使用起來有一些問ti，好吧，都怪我安裝使用說明寫的不清楚└(^o^)┘... 今天給你們補一篇詳細的安裝說明文檔

項目地址：https://github.com/yccphp/laravel-5-markdown-editor

求star,求star,求star,求star,求star (此處省略一萬字)

功能

1. 圖片上傳

2. markdown 語法解析爲 html

3. markdown 編輯器該有的功能都有( 還有誰！還有誰！)

預覽

安裝

1.在 composer.json 的 require 裏面加入如下內容

"yuanchao/laravel-5-markdown-editor": "dev-master"

2.添加完成後，執行 composer update

composer update

3.執行完這行命令，基本上就安裝完啦，接下來打開 config/app.php 往裏面加點東西

// 往裏面加入 `'YuanChao\Editor\EndaEditorServiceProvider'`

'providers' => [

        ........

        'YuanChao\Editor\EndaEditorServiceProvider'

        ........

    ],

// 往裏面加入 `'EndaEditor' => 'YuanChao\Editor\Facade\EndaEditorFacade'`

'aliases' => [

     ..........

    'EndaEditor' => 'YuanChao\Editor\Facade\EndaEditorFacade'

    ..........

    ],

1. 加入以上配置之後，執行 php artisan vendor:publish --force

php artisan vendor:publish

執行上面這行命令之後，若是出現如下結果，說明你已經安裝成功了

Copied File [/vendor/edvinaskrucas/notification/src/config/notification.php] To [/config/notification.php]
Copied Directory [/vendor/yuanchao/laravel-5-markdown-editor/src/config/views] To [/resources/views/vendor/editor]
Copied Directory [/vendor/yuanchao/laravel-5-markdown-editor/src/config/editor] To [/public/plugin/editor]
Copied File [/vendor/yuanchao/laravel-5-markdown-editor/src/config/editor.php] To [/config/editor.php]
Publishing Complete!

使用

安裝完之後，說下如何使用

注意！你必須先引入 jquery 在引入頭部文件以前

在你的視圖文件裏面，須要使用編輯器的地方，先引入頭部文件

// 引入編輯器代碼
@include('editor::head')

而後，好比個人 textarea 須要把他變成編輯器，這個時候，給你的 textarea 寫上一個 id = myEditor

如：<textarea id='myEditor'></textarea>

同時，在你的 textarea 的父級標籤，加上 class = editor,若是你的 textarea 是被 div 包住的，那麼你就這樣寫

// class = editor
<div class="editor">
    <textarea id='myEditor'></textarea>
</div>

必定要給父級標籤加上 class = editor,由於要計算編輯器的位置

看了上面的例子，你應該明白，使用編輯器的兩步就是

1. 引入頭文件

2. 給你須要變成編輯器的標籤加上 id='myEditor' 同時父級標籤加上 class = editor

圖片上傳使用

咱們已經內置了圖片上傳功能，你所須要作的，就是在適合的地方，插入代碼而已

1. 打開 config/editor.php 配置文件，咱們能夠看到裏面有一項配置是 uploadUrl

這個 uploadUrl ，指得是上傳圖片請求的地址，咱們上傳圖片時，是經過 Ajax post 請求 控制器，控制器把圖片上傳，返回圖片地址

那麼問ti來了，編輯器怎麼知道它要去請求哪一個控制器呢？答  案就是，你配置的 uploadUrl是哪一個，它就請求哪一個！

舉個例子：

好比，個人 uploadUrl 配置成了 Home/upload ,那麼當我上傳圖片的時候，它會 Ajax 請求 Home 控制器的 upload 方法對吧？這個時候 upload 方法裏面，須要把圖片上傳，而後返回圖片地址

可是！咱們的擴展裏面已經集成了圖片上傳並返回編輯器所須要的數據了，因此在你的 upload 方法裏面，直接調用擴展的方法就行啦！

首先，在類頭部，添加引用

use EndaEditor;

public function upload(){

        // path 爲 public 下面目錄，好比個人圖片上傳到 public/uploads 那麼這個參數你傳uploads 就好了

        $data = EndaEditor::uploadImgFile('path');

        return json_encode($data);

    }

這個 upload 是專門用於編輯器圖片上傳的哦～

好了，這個時候，你的圖片上傳已經 ok 了！

markdown 轉 html

咱們使用編輯器，把內容插入數據庫後，展現給用戶看的時候，總不能就輸出 markdown 的語法吧～那用戶也看不懂呀

因此，你須要把 markdown 轉成 html，這樣遊覽器纔會解析

那麼問ti來了，如何轉呢？咱們的擴展已經集成了這個功能。咱們來使用下

1. 依舊是頭部引入

首先，在類頭部，添加引用

use EndaEditor;

而後，調用咱們的方法就行啦

// 直接把須要轉換的 markdown 作爲參數傳遞進去

$str = EndaEditor::MarkDecode("#我是markdown語法");

echo $str;

// 結果爲

<h1>我是markdown語法</h1>

是否是很方便呀～

最後在說一句

項目地址：https://github.com/yccphp/laravel-5-markdown-editor

注：本文轉自Laravel開發社區大神Enda博客的博客