Laravel 框架引入 markdown 編輯器

引入 markdown 編輯器packages

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'

    ..........

    ],

4.加入以上配置之後，執行

php artisan vendor:publish –force

// 加上 --force 覆蓋配置文件

php artisan vendor:publish --force

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

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,由於要計算編輯器的位置

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

引入頭文件給你須要變成編輯器的標籤加上 id=’myEditor’ 同時父級標籤加上 class = editor

圖片上傳使用

打開 config/editor.php 配置文件，咱們能夠看到裏面有一項配置是 uploadUrl 這個 uploadUrl ，指得是上傳圖片請求的地址，
咱們上傳圖片時，是經過 Ajax post 請求 控制器，控制器把圖片上傳，返回圖片地址
好比，個人 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，這樣遊覽器纔會解析
那麼問題來了，如何轉呢？咱們的擴展已經集成了這個功能。咱們來使用下
依舊是頭部引入 首先，在類頭部，添加引用

use EndaEditor;

而後，調用咱們的方法就行啦
// 直接把須要轉換的 markdown 作爲參數傳遞進去

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

echo $str;
// 結果爲
<h1>我是markdown語法</h1>