laravel中使用WangEditor及多圖上傳(下篇)

laravel中使用WangEditor及多圖上傳(下篇)

1. 快速生成前臺文章

1.1 建立路由

Route::resource('/article', 'ArticleController');

1.2 快速生成文章控制器ArticleController

php artisan make:controller ArticleController

1.3 修改文章控制器app/Http/ArticleController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class ArticleController extends Controller
{
    public function 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'));
    }
}

1.4 建立視圖文件

列表頁
resource/view/home/article/index.blade.php

extends('layouts.app')

@section('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>
            @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>
            @empty
                <p>什麼都沒有 :(</p>
            @endforelse

            {{ $data->links() }}
        </div>
    </div>
</div>
@endsection

詳情頁
resource/view/home/article/list.blade.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>
            <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>
                  
                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" style="max-height:350px;overflow:hidden;">
                    <div class="item active">
                      <img src="/uploads/{{ $data->cover[0] }}" alt="圖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="圖{{ $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>
                <li><span>建立時間: </span>{!! $data->created_at !!}</li>
                <li><span>更新時間: </span>{!! $data->updated_at !!}</li>
            </div>
         </div>
    </div>
</div>
@endsection

這裏咱們用到了bootstrap的導航欄
在resource/layouts/app.php
引入bootstrap.css

<!-- 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>

效果圖

2. 美化圖片顯示，加入lightbox

2.1 加入lightbox.css以及lightbox.js

在頭部加入

<!-- 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>

加載js 注意lightbox.js依賴jquery.js
因此要先加載jquery

<!-- 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>

在視圖文件list.blade.php加入

加在 <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

最後效果圖

原文連接 https://www.bear777.com/blog/laravel-wangeditor-1
github地址 https://github.com/pandoraxm/laravel-admin-wangeditor