laravel-admin 集成富文本编辑器wangEditor教程

运行环境：

• 系统 win10 ， 环境：集成环境 phpstudy8 WNMP
• php: >=7.0.0,
• barryvdh/laravel-ide-helper: ^2.4,
• doctrine/dbal: ~2.3,
• encore/laravel-admin: 1.5.*
• laravel/laravel: 5.5.*
• wangEditor:3.1.1

准备工作

下载wangEditor扩展包，安装到public/vendor/目录下，下载地址：https://www.wangeditor.com/

一、然后新建组件类

app/Admin/Extensions/WangEditor.php

<?php
namespace App\Admin\Extensions;
use Encore\Admin\Form\Field;
class WangEditor extends Field
{
    //加载的视图地址：resources/views/admin/wang-editor;
    protected $view = 'admin.wang-editor';
    //加载css,js地址/public/vendor/wangEditor...
    protected static $css = [
        '/vendor/wangEditor-3.1.1/release/wangEditor.min.css',
    ];
    protected static $js = [
        '/vendor/wangEditor-3.1.1/release/wangEditor.min.js',
    ];
    //页面进行渲染
    public function render()
    {
        $name = $this->formatName($this->column);

        $this->script = <<<EOT
var E = window.wangEditor
var editor = new E('#{$this->id}');
editor.customConfig.uploadFileName = 'mypic[]';
editor.customConfig.uploadImgHeaders = {
    'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
editor.customConfig.zIndex = 0;
editor.customConfig.uploadImgServer = '/uploadFile';
editor.customConfig.onchange = function (html) {
    $('input[name=$name]').val(html);
}
editor.customConfig.uploadImgHooks = {
    customInsert: function (insertImg, result, editor) {
        console.log(result);
        if (typeof(result.length) != "undefined") {
            for (var i = 0; i <= result.length - 1; i++) {
                var j = i;
                var url = result[i].newFileName;
                insertImg(url);
            }
            toastr.success(result[j]['info']);
        }
        switch (result['ResultData']) {
            case 6:
                toastr.error("最多可以上传4张图片");
                break;
            case 5:
                toastr.error("请选择一个文件");
                break;
            case 4:
                toastr.error("上传失败");
                break;
            case 3:
                toastr.error(result['info']);
                break;
            case 2:
                toastr.error("文件类型不合法");
                break;
            case 1:
                toastr.error(result['info']);
                break;
        }
    }
}
editor.create();
EOT;
        return parent::render();
    }
}

二、新建视图文件

resources/views/admin/wang-editor.blade.php

<div class="form-group {!! !$errors->has($label) ?: 'has-error' !!}">
    <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>
    <div class="{{$viewClass['field']}}">
        @include('admin::form.error')
        <div id="{{$id}}" style="width: 100%; height: 100%;">
            <p>{!! old($column, $value) !!}</p>
        </div>
        <input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" />
    </div>
</div>

三、然后注册进laravel-admin

在app/Admin/bootstrap.php中添加以下代码：

<?php
use App\Admin\Extensions\WangEditor;
use Encore\Admin\Form;
Form::extend('editor', WangEditor::class);

四、上传图片,使用集成好的编辑器上传图片

由于WangEditor.php配置中没有设置token,上传图片会报错，还需要配置几个信息
1： token，不配置token会报419错误
2： 上传路径，使用base64储存会报长度过长错误，所以需要自行上传到服务器
3： 自定义上传文件创建 appHttpControllersUploadsController.php
4： 自定义上传大小限制，可选

五、创建上传图片控制器
appHttpControllersUploadsController.php 代码:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UploadsController extends Controller
{
   function uploadImg(Request $request)
    {
        $file = $request->file("mypic");
//        return response()->json([$file[0]]);
        if (!empty($file)) {
            $len = count($file);
            if ($len > 25) {
                return response()->json(['ResultData' => 6, 'info' => '最多可以上传25张图片']);
            }
            $m = 0;
            $k = 0;
            for ($i = 0; $i < $len; $i++) {
                // $n 表示第几张图片
                $n = $i + 1;
                if ($file[$i]->isValid()) {
                    if (in_array(strtolower($file[$i]->extension()), ['jpeg', 'jpg', 'gif', 'gpeg', 'png'])) {
                        $picname = $file[$i]->getClientOriginalName();//获取上传原文件名
                        $ext = $file[$i]->getClientOriginalExtension();//获取上传文件的后缀名
                        // 重命名
                        $filename = time() . str_random(6) . "." . $ext;
                        $re = Storage::disk('public')->putFile('upload',$file[$i]);
                        if ($re) {
                            $newFileName = config('filesystems.disks.public.url').'/'.$re;
                            $m = $m + 1;
                            // return response()->json(['ResultData' => 0, 'info' => '上传成功', 'newFileName' => $newFileName ]);
                        } else {
                            $k = $k + 1;
                            // return response()->json(['ResultData' => 4, 'info' => '上传失败']);
                        }
                        $msg = $m . "张图片上传成功 " . $k . "张图片上传失败<br>";
                        $return[] = ['ResultData' => 0, 'info' => $msg, 'newFileName' => $newFileName];
                    } else {
                        return response()->json(['ResultData' => 3, 'info' => '第' . $n . '张图片后缀名不合法!<br/>' . '只支持jpeg/jpg/png/gif格式']);
                    }
                } else {
                    return response()->json(['ResultData' => 1, 'info' => '第' . $n . '张图片超过最大限制!<br/>' . '图片最大支持2M']);
                }
            }

        } else {
            return response()->json(['ResultData' => 5, 'info' => '请选择文件']);
        }
        return $return;
}

六、路由配置 routesweb.php

Route::post('/uploadFile', 'UploadsController@uploadImg');

七、访问图片地址

public 磁盘适用于要公开访问的文件。默认情况下， public 磁盘使用 local 驱动，并且将这些文件存储在 storage/app/public 目录下。为了使它们能通过网络访问，你需要创建 public/storage 到 storage/app/public 的符号链接（就是生成window的快捷方式）。这种方式能把可公开访问文件都保留在同一个目录下，以便在使用零停机时间部署系统如 Envoyer 的时候，就可以轻松地在不同的部署之间共享这些文件。

你可以使用 Artisan 命令 storage:link 来创建符号链接：

php artisan storage:link

它会在根目录（public目录）下生成一个storage/upload符号链接。你就可以正常访问图片了。

八、调用:

$form->editor('content','内容');