laravel 中 wangEditor 富文本编辑器使用指南

在本课程中，老师使用的富文本编辑器是 2.0 的版本，且输入区域使用的 textarea，但是在新的 3.0 版本中（新版本富文本编辑器只需要引用一个js文件即可），开发者不建议使用 textarea ，而采用输入区域 div元素。所以前后端交互也从原来的form 表单提交变成了ajax POST 请求提交，这样会导致两个问题：
1 前后端交互，如何实现表单验证的页面错误提示；
2 图片如何上传及回填富文本编辑器。

一 实现表单验证的错误提示

本课程中，我们使用的是 larvel 提供的 error 对象，并在页面加载时将 error 信息渲染到页面上，但由于在 3.x 版本的富文本编辑器中，请求方式变更为 ajax POST 请求，所以我们需要 laravel 给客户端的ajax程序响应一个包含错误信息的 json 数据，这样客户端的 ajax 回调函数接收并解析 json 数据，拼接 DOM 元素并将验证错误信息动态添加到页面上，完成前后端验证交互。

二 图片上传及图片回填到富文本编辑器

本课程中，图片上传的 name 值 为 “wangEditorH5File”，在新版本中，这个值需要自己手动设置，具体操作请看如下源代码。

js文件内容

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }});var E = window.wangEditor;var editor = new E('#div1', '#div2');// 配置服务器端地址editor.customConfig.uploadImgServer = '/posts/image/upload';// 设置文件的name值editor.customConfig.uploadFileName = 'wangEditorH5File';// 设置 headers（举例）editor.customConfig.uploadImgHeaders = {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')};// 上传文件监听editor.customConfig.uploadImgHooks = {
    customInsert: function (insertImg, result, editor) {
        var url = result.data;
        //上传图片回填富文本编辑器
        insertImg(url);
    }};editor.create();document.getElementById('btn').addEventListener('click', function () {
    var res = editor.txt.html();
    var title = $("input[name=title]").val();
    $.ajax({
        url: '/posts',
        method: 'POST',
        dataType: "json",
        data: {
            'content': res,
            'title': title        },
        success: function (data) {
            if (data.error != 0) {
                return;
            }
            //js 跳转
            window.location.href = '/posts';
        }, error: function (data) {
            var json = JSON.parse(data.responseText);
            // 动态在页面添加错误提示信息
            str = '<div class="alert alert-danger" role="alert">';
            $.each(json, function (i, n) {
                str += '<li>' + n[0] + '</li>';
            });
            str += '</div>';
            $(".alert").remove();
            $("#btn").before(str);
        }
    });}, false);

html文件内容

<div class="col-sm-8 blog-main">
        <div class="form-group">
            <label>标题</label>
            <input name="title" type="text" class="form-control" placeholder="这里是标题">
        </div>
        <div class="form-group">
            <label>内容</label>
            <div id="div1" class="toolbar">
            </div>
            <div style="padding: 5px 0; color: #ccc"></div>
            <div id="div2" class="text" name="content"  class="form-control"> <!--可使用 min-height 实现编辑区域自动增加高度-->
            </div>
        </div>
        <button type="submit" class="btn btn-default" id="btn">提交</button></div>

PostController.php文件

<?php...class PostController extends Controller{....//上传图片public function imageUpload(Request $request){
    $path = $request->file('wangEditorH5File')->storePublicly(md5(time()));
    $data = asset('storage/' . $path);
    echo json_encode(array(
        "error" => 0,
        "data" => $data,
    ));}...}

filesystems.php文件

...'default' => 'public',...'disks' => [

        'local' => [
        'driver' => 'local',
        'root' => storage_path('app'),
    ],

    'public' => [
        'driver' => 'local',
        'root' => storage_path('app/public'),
        'url' => env('APP_URL').'/storage',
        'visibility' => 'public',
    ],

    's3' => [
        'driver' => 's3',
        'key' => env('AWS_KEY'),
        'secret' => env('AWS_SECRET'),
        'region' => env('AWS_REGION'),
        'bucket' => env('AWS_BUCKET'),
    ],],...

路由设置

//图片上传Route::post('/posts/image/upload', '\App\Http\Controllers\PostController@imageUpload');

注意，还需要设置上传文件的软链接，因为上传的图片无法访问除 public 以外的目录。

php artisan storage:link

作者：super彬
链接：https://www.imooc.com/article/22825#
来源：慕课网