laravel -admin 集成wangEditor并实现上传图片

集成wangEditor

http://laravel-admin.org/docs/#/zh/model-form-field-management

集成富文本编辑器wangEditor

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

先下载前端库文件wangEditor，解压到目录public/vendor/wangEditor-3.0.9。

然后新建组件类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.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);

        $this->script = <<<EOT

var E = window.wangEditor
var editor = new E('#{$this->id}');
editor.customConfig.zIndex = 0
editor.customConfig.uploadImgShowBase64 = true
editor.customConfig.onchange = function (html) {
    $('input[name=\'$name\']').val(html);
}
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);

调用:

$form->editor('body');

上传图片

扫描二维码关注公众号，回复： 2436205 查看本文章

使用集成好的编辑器上传图片还需要配置几个信息

1： token，不配置token会报419错误

2： 上传路径，使用base64储存会报长度过长错误，所以需要自行上传到服务器

3： 自定义上传名称，可选

4： 自定义上传大小限制，可选

最终配置为

public function render()
    {
        $name = $this->formatName($this->column);

        $this->script = <<<EOT

var E = window.wangEditor
var editor = new E('#{$this->id}');
editor.customConfig.zIndex = 0
editor.customConfig.uploadImgHeaders = {
    'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
editor.customConfig.uploadImgServer = '/api/upimage'
editor.customConfig.uploadFileName = 'wangpic[]'
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
editor.customConfig.onchange = function (html) {
    $('input[name=\'$name\']').val(html);
}
editor.create()

EOT;
        return parent::render();
    }

路由

$router->post('upimage', 'UploadApiController@upimage');

上传

public function upimage(Request $request) {
      $files = $request->file("wangpic");
      $res = ['errno' => 1, 'errmsg' => '上传图片错误'];
      $data = [];
      foreach($files as $key => $file) {
        $ext = strtolower($file->extension());
        $exts = ['jpg', 'png', 'gif', 'jpeg'];
        if(!in_array($ext, $exts)) {
          $res = ['errno' => 1, 'errmsg' => '请上传正确的图片类型，支持jpg, png, gif, jpeg类型'];
          return json_encode($res);
        } else {
          $filename = time() . str_random(6) . "." . $ext;
          $filepath = 'uploads/images/' . date('Ym') . '/';
          if (!file_exists($filepath)) {
            @mkdir($filepath);
          }
          $savepath = config('app.url') . '/' . $filepath . $filename;
          if ($file->move($filepath, $filename)) {
            $data[] = $savepath;
          }
        }
      }
      $res = ['errno' => 0, 'data' => $data];
      return json_encode($res);
    }