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 = '';
     $.each(json, function (i, n) {
  str += '
' + n[0] + '
';
     });
     str += '';
     $(".alert").remove();
     $("#btn").before(str);
 }
    });

}, false);

html文件内容

 
     标题
     
 
 
     内容
     
     
     
      
     
 
 提交

PostController.php文件

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', 'AppHttpControllersPostController@imageUpload');

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

php artisan storage:link