整合wangEditor

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

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');

上傳圖片

使用整合好的編輯器上傳圖片還需要配置幾個資訊

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', '[email protected]');

上傳

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);
    }