laravel markdown

效果预览:

laravel markdown_第1张图片
预览

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

再继续加入


{!! Form::textarea('content', '', ['class' => 'form-control','id'=>'myEditor']) !!}

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引用部分

你可能感兴趣的:(laravel markdown)