Using WangEditor and Multi-image uploads in Laravel

Using WangEditor and Multi-image uploads in Laravel

1. Generate front desk articles quickly

1.1 Creating a Route

Route::resource('/article'.'ArticleController');
Copy the code

1.2 quickly generate ArticleController ArticleController

php artisan make:controller ArticleController
Copy the code

App/Http / 1.3 modify articles controller ArticleController. PHP

<? php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\Post; class ArticleController extends Controller { publicfunction index()
    {
        $data = Post::paginate(5);
        return view('home.article.index', compact('data'));
    }

    public function show($id)
    {
        $data = Post::find($id);
        return view('home.article.list', compact('data')); }}Copy the code

1.4 Creating a View File

Page lists the resource/view/home/article/index. The blade. PHP

@extends('layouts.app')

@section('title'.'Article List Page')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="page-header"> <h3> Article list </h3> </div> @forelse ($data as $list)
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a href="/article/{{ $list->id }}"> {{$list->title }}</a>
                    </div>
                    <div class="panel-body" style="max-height:300px; overflow:hidden;">
                        <img src="/uploads/{!! ($list->cover)[0] !! }" style="max-width:100%; overflow:hidden;" alt=""> < / div > < / div > @ the empty < p > nothing: (< / p > @ endforelse {{$data->links() }}
        </div>
    </div>
</div>
@endsection
Copy the code

Details page of the resource/view/home/article/list. The blade. The PHP

@extends('layouts.app')

@section('title'."$data->title")

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="page-header"><h3> </h3> </div> <li><h3>{!!$data->title !! }</h3></li> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <! -- Indicators --> <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    @for($i= 1;$i<count($data->cover);$i++)
                    <li data-target="#carousel-example-generic" data-slide-to="{{ $i }}"></li> @endfor </ol> <! -- Wrapperfor slides -->
                  <div class="carousel-inner" style="max-height:350px; overflow:hidden;">
                    <div class="item active">
                      <img src="/uploads/{{ $data->cover[0] }}" alt="Figure 1">
                      <div class="carousel-caption">... </div> </div> @for($i= 1;$i<count($data->cover);$i++)
                    <div class="item">
                      <img src="/uploads/{{ $data->cover[$i]}}" alt="Figure {{$i }}">
                      <div class="carousel-caption">
                        ...
                      </div>
                    </div>
                    @endfor
                  </div>
                  <hr>
                  <!-- Controls -->
                  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>
                
                <li>{!! $data->content !! </li> <span> </span>{!$data->created_at !! }</li> <li><span>$data->updated_at !! }</li> </div> </div> </div> </div> @endsectionCopy the code

Here we use the bootstrap navigation to import bootstrap.css in resource/layouts/app.php

<! -- Styles --> <link href="/css/app.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        li {
            list-style: none;
        }
    </style>
Copy the code

rendering

2. Beautify the image display and add lightbox

2.1 Added lightbox.css and lightbox.js

Add to the header

<! -- Styles --> <link href="/css/app.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/lightbox2/2.10.0/css/lightbox.min.css">
    <style>
        li {
            list-style: none;
        }
    </style>
Copy the code

Lightbox.js depends on jquery.js, so you need to load jquery first

<! -- Scripts --> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/lightbox2/2.10.0/js/lightbox.js"></script>
    <script src="/js/app.js"></script>
Copy the code

Add it to the view file list.blade.php

Add in < li > {!!!!! $data->content !! } < / li >

                @foreach($data->cover as $cover)
                <span><a href="/uploads/{!! $cover!!!!! }" data-lightbox="roadtrip" data-title="{!!!!!$data->title !! }"><img src="/uploads/{!! $cover!!!!! }" style="max-width:25%;" alt=""></a></span>
                @endforeach
Copy the code

Final rendering

The original link www.bear777.com/blog/larave…

Making address github.com/pandoraxm/l…

Using WangEditor and Multi-image uploads in Laravel