效果預(yù)覽：
預(yù)覽
1.安裝
composer require yuanchao/laravel-5-markdown-editor
2.在config/app.php 的 providers 數(shù)組加入一條
YuanChao\Editor\EndaEditorServiceProvider::class
3.在config/app.php 的 aliases 數(shù)組加入一條
'EndaEditor' => YuanChao\Editor\Facade\EndaEditorFacade::class
5.執(zhí)行 php artisan vendor:publish --tag=EndaEditor
執(zhí)行完上面的命令后倒彰，會(huì)生成配置文件和視圖文件到你的 config/ 和 views/vendor 目錄
6.在需要編輯器的地方先插入以下代碼
注：一定要放在jquery之前
@include('editor::head')
再繼續(xù)加入
<!-- 若使用了 laravelcollective/html package -->
<div class="editor">
{!! Form::textarea('content', '', ['class' => 'form-control','id'=>'myEditor']) !!}
</div>
<!-- 若使用html標(biāo)簽 待讳，直接使用textarea -->
<textarea id='myEditor'></textarea>
7.圖片上傳配置仰剿，打開(kāi)config/editor.php 配置文件痴晦，修改里面的 uploadUrl 配置項(xiàng)，并自定義路由
return [
// 寬度
'width'=>'100%',
'uploadUrl'=>'markdown/upload', //請(qǐng)自定義添加路由
/*
* 在添加鏈接的時(shí)候可以給定一個(gè)ajax鏈接阅酪，這樣可以方便的添加在系統(tǒng)中的文章
* 服務(wù)器返回的數(shù)據(jù)格式為：{'title':'url','title2':'url2'}
*/
// 'ajaxTopicSearchUrl' => 'home/ajax-search-topics'
];
在相應(yīng)的控制器里添加
use EndaEditor;
public function postUpload()
{
// $path 為你 public 下的目錄
$path = 'uploads/image';
$data = EndaEditor::uploadImgFile($path);
return json_encode($data);
}
8.解析 markdown 為 html 功能
return view('test',[
'content'=>EndaEditor::MarkDecode($markdown)
]);
在所對(duì)應(yīng)的.blade頁(yè)面加入术辐，以支持bootstrap
@include('editor::decode')
為了保證圖片的顯示正常，請(qǐng)使用 zoom
9.我自己使用中出現(xiàn)的問(wèn)題
1）在markdown編輯器里辉词，點(diǎn)擊上傳圖片按鈕彈出modal時(shí)猾骡，出現(xiàn)遮蓋，是因?yàn)橹貜?fù)引用了bootstrap
解決方法：打開(kāi)
resources/views/vendor/editor/head.blade.php
注釋掉bootstrap引用部分
