Laravel supports markdown editor solution


Original link: Support markdown editor solution

Laravel markdown editor — markdown editor


This expansion pack is compatible with laravel 5.8 and above


Install expansion pack

composer require wjcms/laravel-markdown-editor

Configure providers

'providers' => [
    //Add the following line

Copy the relevant files to the project folder

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


1. Introduce the blade template


2. It needs to be added in the parent template

#Note that jQuery needs to be introduced on scripts


3. Modification md.blade.php Modify the imageuploadurl of the file to the interface path

4. Create service service uploadservice.php To implement the following method.

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

//Note that the attachment model and database (including three fields of path, extension and name) need to be created
    protected function save(UploadedFile $file, $path)
        return Attachment::create([

5. Creating method of admin controller

     *Picture upload method
    public function uploadPic(Request $request, UploadService $uploadService)
        $res = $uploadService->upload($request->file('editormd-image-file'));
        return response()->json([
            'message '= >'image uploaded successfully',
            'url'=> $res->path

6.routes/ web.php File add route

use App\Http\Controllers\Admin;
//Note that the version of avel 8 was written before
Route::prefix('admin')->name('admin.')->group(function () {
    Route::post('upload', [Admin\AdminController::class,'uploadPic'])->name('upload');

You can find that the markdown editor is ready to use.

Recommended Today

Layout of angular material (2): layout container

Layout container Layout and container Using thelayoutDirective to specify the layout direction for its child elements: arrange horizontally(layout=”row”)Or vertically(layout=”column”)。 Note that if thelayoutInstruction has no value, thenrowIs the default layout direction. row: items arranged horizontally.max-height = 100%andmax-widthIs the width of the item in the container. column: items arranged vertically.max-width = 100%andmax-heightIs the height of the […]