Laravel 支持markdown编辑器解决方案

最新推荐文章于 2020-11-28 23:18:58 发布

原创最新推荐文章于 2020-11-28 23:18:58 发布 · 659 阅读

CC 4.0 BY-SA版权

这篇博客介绍了如何在Laravel项目中支持Markdown编辑器。首先，需要安装特定的扩展包并配置providers，接着将相关文件复制到项目中。然后，在Blade模板中引入编辑器，并在父模板中添加必要设置。此外，还需修改`md.blade.php`的图片上传URL，创建一个名为`uploadservice.php`的服务，并在admin控制器中添加相应方法，同时在`routes/web.php`文件中定义路由。按照这些步骤，就能成功启用Markdown编辑器。

原文连接：https://www.wjcms.net/archives/laravel%E6%94%AF%E6%8C%81markdown%E7%BC%96%E8%BE%91%E5%99%A8%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88

laravel-markdown-editor--markdown编辑器

说明

此扩展包兼容laravel5.8以上版本

准备工作

安装扩展包

composer require wjcms/laravel-markdown-editor

配置providers

//cconfig/app.php
'providers' => [
    //添加如下一行
    wjcms\laravelmd\LaravelmdServiceProvider::class,
]

拷贝相关文件到项目文件夹中

php artisan vendor:publish --provider="wjcms\laravelmd\LaravelmdServiceProvider"

使用

1.在blade模版引入

@include('layouts.md.md')

2.父模版中需要添加上

#注意在scripts上边需要引入jquery
@stack('styles')

@stack('scripts')

3.修改md.blade.php文件的 imageUploadURL修改为接口路径

4.创建service服务uploadservice.php,实现如下方法。

public function upload(UploadedFile $file)
    {
        $path = '/uploads/'.$file->store(date('y/m'), 'uploads');
        return $this->save($file, $path);
    }

//注意这里还需要创建Attachment模型和数据库（包含path,extension,name三个字段）
    protected function save(UploadedFile $file, $path)
    {
        return Attachment::create([
            'path'=>$path,
            'extension'=>$file->extension(),
            'name'=>$file->getClientOriginalName()
        ]);
    }

5.admin控制器创建方法

/**
     * 图片上传方法
     */
    public function uploadPic(Request $request, UploadService $uploadService)
    {
        $res = $uploadService->upload($request->file('editormd-image-file'));
        return response()->json([
            'success'=>1,
            'message'=>'图片上传成功',
            'url'=> $res->path
        ]);
    }

6.routes/web.php文件添加路由

use App\Http\Controllers\Admin;
//注意这里是laravel8的写法，之前版本自行修改
Route::prefix('admin')->name('admin.')->group(function () {
    Route::post('upload', [Admin\AdminController::class,'uploadPic'])->name('upload');
}

就可以发现markdown编辑器可以使用了。