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

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

先下载前端库文件wangEditor,解压到目录public/vendor/wangEditor-3.0.15

1、然后新建组件类

app/Admin/Extensions/WangEditor.php。

formatName($this->column);
        $this->script = <<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

@include('admin::form.error')

{!! old($column, $value) !!}

3、然后注册进laravel-admin

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

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

由于WangEditor.php配置中没有设置token,上传图片会报错,还需要配置几个信息

  • 1: token,不配置token会报419错误
  • 2: 上传路径,使用base64储存会报长度过长错误,所以需要自行上传到服务器
  • 3: 自定义上传文件创建 appHttpControllersUploadsController.php
  • 4: 自定义上传大小限制,可选

5、创建 上传图片控制器

appHttpControllersUploadsController.php 代码:

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", $filename)) {
                            $newFileName = '/' . "uploads/images" . '/' . $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 . "张图片上传失败
"; $return[] = ['ResultData' => 0, 'info' => $msg, 'newFileName' => $newFileName]; } else { return response()->json(['ResultData' => 3, 'info' => '第' . $n . '张图片后缀名不合法!
' . '只支持jpeg/jpg/png/gif格式']); } } else { return response()->json(['ResultData' => 1, 'info' => '第' . $n . '张图片超过最大限制!
' . '图片最大支持2M']); } } } else { return response()->json(['ResultData' => 5, 'info' => '请选择文件']); } return $return; } }

6、路由配置 routesweb.php

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

7、调用:

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

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

读书破万卷,下笔如有神.

评论

返回顶部