wangeditor ajax,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文件

...

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