laravel-admin 使用 wangEditor 的一些小方法

在我们使用 laravel-admin 作为系统管理后台的时候经常会用到 editor 作为编辑器来给我们编辑内容，但是在 laravel-admin 的官网上只介绍了怎么下载使用，其中有一个问题就是上传图片的问题，我们需要开发一个上传图片的接口。

基本的下载安装去看 laravel-admin 官网，下面我来贴一下代码

先来新建一个 ImageUploadHandler.php 来作为处理传入的图片：

[code]<?php

namespace App\Handlers;

class ImageUploadHandler
{
// 只允许以下后缀名的图片文件上传
protected $allowed_ext = ["png", "jpg", "gif", 'jpeg'];

public function save($file, $folder, $file_prefix)
{
// 构建存储的文件夹规则，值如：uploads/images/avatars/201709/21/
// 文件夹切割能让查找效率更高。
$folder_name = "uploads/$folder/" . date("Ym", time()) . '/'.date("d", time()).'/';

// 文件具体存储的物理路径，`public_path()` 获取的是 `public` 文件夹的物理路径。
// 值如：/home/vagrant/Code/larabbs/public/uploads/images/avatars/201709/21/
$upload_path = public_path() . '/' . $folder_name;

// 获取文件的后缀名，因图片从剪贴板里黏贴时后缀名为空，所以此处确保后缀一直存在
$extension = strtolower($file->getClientOriginalExtension()) ?: 'png';

// 拼接文件名，加前缀是为了增加辨析度，前缀可以是相关数据模型的 ID
// 值如：1_1493521050_7BVc9v9ujP.png
$filename = $file_prefix . '_' . time() . '_' . str_random(10) . '.' . $extension;

// 如果上传的不是图片将终止操作
if ( ! in_array($extension, $this->allowed_ext)) {
return false;
}

// 将图片移动到我们的目标存储路径中
$file->move($upload_path, $filename);

return [
'path' => config('app.url') . "/$folder_name/$filename"
];
}
}

然后新建 UploadController 接口：

[code]<?php

namespace App\Admin\Controllers;

use App\Http\Controllers\Controller;
use App\Handlers\ImageUploadHandler;
use Illuminate\Http\Request;

class UploadController extends Controller
{
public function upImage(Request $request, ImageUploadHandler $uploader)
{
// 初始化返回数据，默认是失败的
$data = [
'errno'   => 1,
];
// 判断是否有上传文件，并赋值给 $file
if ($file = $request->upload_file) {
// 保存图片到本地
$result = $uploader->save($request->upload_file, 'admin', 1, 1024);
// 图片保存成功的话
if ($result) {
$data['data'][] = $result['path'];
$data['errno']   = 0;
}
}

return $data;
}
}

然后我们还需要修改一个 wangEditor.php 的代码：

[code]<?php

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class WangEditor extends Field
{
protected $view = 'admin.wang-editor';

protected static $css = [
'/vendor/wangEditor-3.0.9/release/wangEditor.min.css',
];

protected static $js = [
'/vendor/wangEditor-3.0.9/release/wangEditor.min.js',
];

public function render()
{
$name = $this->formatName($this->column);
$token = csrf_token();
$this->script = <<<EOT
var E = window.wangEditor
var editor = new E('#{$this->id}');
editor.customConfig.zIndex = 0;
editor.customConfig.debug = true;
editor.customConfig.pasteFilterStyle = true
editor.customConfig.uploadImgServer = '/admin/up_image';
editor.customConfig.uploadFileName = "upload_file";
editor.customConfig.uploadImgParams = {
_token: '{$token}'
}

editor.customConfig.onchange = function (html) {
$('input[name=$name]').val(html);
}
editor.create()

EOT;

return parent::render();
}
}

最后在路由中新加一个路由就行了。