laravel markdown

效果预览：

预览

1.安装

composer require yuanchao/laravel-5-markdown-editor

2.在config/app.php 的 providers 数组加入一条

YuanChao\Editor\EndaEditorServiceProvider::class

3.在config/app.php 的 aliases 数组加入一条

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

5.执行 php artisan vendor:publish --tag=EndaEditor

执行完上面的命令后，会生成配置文件和视图文件到你的 config/ 和 views/vendor 目录

6.在需要编辑器的地方先插入以下代码

注：一定要放在jquery之前

@include('editor::head')

再继续加入

<!-- 若使用了 laravelcollective/html package -->
<div class="editor">
    {!! Form::textarea('content', '', ['class' => 'form-control','id'=>'myEditor']) !!}
</div>

<!-- 若使用html标签 ，直接使用textarea -->
<textarea id='myEditor'></textarea>

7.图片上传配置，打开config/editor.php 配置文件，修改里面的 uploadUrl 配置项，并自定义路由

return [
    // 宽度
    'width'=>'100%',
    'uploadUrl'=>'markdown/upload', //请自定义添加路由
    /*
     * 在添加链接的时候可以给定一个ajax链接，这样可以方便的添加在系统中的文章
     * 服务器返回的数据格式为：{'title':'url','title2':'url2'}
     */
    //  'ajaxTopicSearchUrl' => 'home/ajax-search-topics'
];

在相应的控制器里添加

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)
]);

在所对应的.blade页面加入，以支持bootstrap

@include('editor::decode')

为了保证图片的显示正常，请使用 zoom

9.我自己使用中出现的问题

1）在markdown编辑器里，点击上传图片按钮弹出modal时，出现遮盖，是因为重复引用了bootstrap

解决方法：打开resources/views/vendor/editor/head.blade.php
注释掉bootstrap引用部分