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

laravel-admin扩展自定义组件,wangEditor是一个优秀的国产的轻量级富文本编辑器，如果laravel-admin自带的基于ckeditor的编辑器组件使用上有问题，可以通过下面的步骤可以集成它，并覆盖掉ckeditor：

注意：Laravel从5.6升级到6.0后，所有的str_和array_帮助程序都已移至新的laravel/helpersComposer程序包中，并且已从框架中删除。如果需要，您可以更新对这些助手的所有调用，可以使用use Illuminate\Support\Str;和use Illuminate\Support\Arr;类。另外，您可以将新的laravel/helpers包添加到您的应用程序中以继续使用这些帮主程序。

$ composer require laravel/helpers

如果不想添加包，则使用Str和Arr类。

Str::random(12)

因为下面我们在开发中会用到Str::random()，低版本的laravel还在使用Str_random(),所以使用之前一定要看好自己的laravel版本。 先下载前端库文件wangEditor，解压到目录public/vendor/wangEditor-3.0.15

1、然后新建组件类

app/Admin/Extensions/WangEditor.php。

<?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.15/release/wangEditor.min.css',
    ];
    protected static $js = [
        '/vendor/wangEditor-3.0.15/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) {
        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();
// var editor = new wangEditor('{$this->id}');
//     editor.create();
EOT;
        return parent::render();
    }
}

2、新建视图文件

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>

3、然后注册进laravel-admin

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

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

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

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

5、创建 上传图片控制器

app\Http\Controllers\UploadsController.php 代码:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Str;
class UploadsController extends Controller
{
    public function uploadImg(Request $request)
    {
        $file = $request->file("mypic");
        // dd($file);
        if (!empty($file)) {
            foreach ($file as $key => $value) {
                $len = $key;
            }
            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;
                        if ($file[$i]->move("uploads/images/photopic", $filename)) {
                            $newFileName = '/' . "uploads/images/photopic" . '/' . $filename;
                            $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;
    }
}

6、路由配置 routes\web.php

一定要放在不需要验证的路由之外。

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

7、调用:

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

这样就配置完编辑器与多图上传了，参考源码https://github.com/pandoraxm/laravel-admin-wangeditor