[Day 47] 留言板后台及前台(三) - 留言板画面2

我们在这里用到了文字编辑器,
我们使用的是CKEditor,
可以到 这边 下载
也可以参照 官方文件 直接引用网路上的,
下面是下载的画面:

然后我们把下载下来的资料夹放到我们的js资料夹底下并改成ckeditor5,
(不改也行,路径写对就可以)
接着在 resources/views/layout/master.blade.php 的bootstrap后面加入一行

<script src="/js/ckeditor5/ckeditor.js" type="text/javascript"></script>

然后加入文字方块的部分,
修改 resources/views/blog/board.blade.php 变成这样

<!-- 指定继承 layout.master 母模板 -->@extends('layout.master')<!-- 传送资料到母模板，并指定变数为title -->@section('title', $title)<!-- 传送资料到母模板，并指定变数为content -->@section('content')<div>    <p class="body_title">留言板</p></div><div class="body_show_region form_radius">    @foreach($boardList as $data)    @endforeach    <form action = "" method="POST" class="normal_form" />        <!-- 自动产生 csrf_token 隐藏栏位-->        {!! csrf_field() !!}        <div class="col-sm-6">            <div class="form_label">电子邮件:</div>            <div class="form_textbox_region">                <input name="email" class="form_textbox" type="text" value="{{ $input['email'] ?? '' }}" placeholder="请输入电子邮件"/>            </div>        </div>        <div class="div_clear"/>        <textarea name="content" id="editor">            {{ $input['content'] ?? '' }}        </textarea>        <div class="btn_group">            <input class="btn btn-primary btn_form" type = 'submit' value = '送出'>        <div>        <div class="form_error">            <!-- 错误讯息模板元件 -->            @include('layout.ValidatorError')        </div>    </form></div><script>    ClassicEditor        .create( document.querySelector( '#editor' ) )        .catch( error => {            console.error( error );        } );</script>@endsection

一个基本的画面就出来了