laravel-admin引用wangEditor編輯器 使用一：上傳圖片

1.安裝wangEditor

安裝

composer require laravel-admin-ext/wang-editor

然後

php artisan vendor:publish --tag=laravel-admin-wangEditor

配置

在config/admin.php文件的extensions，加上屬於這個擴展的一些配置

    'extensions' => [

        'wang-editor' => [
        
            // 如果要關掉這個擴展，設置爲false
            'enable' => true,
            
            // 編輯器的配置
            'config' => [
                
            ]
        ]
    ]

詳見：https://github.com/laravel-admin-extensions/wangEditor

https://www.kancloud.cn/wangfupeng/wangeditor3/335776 使用手冊

2.新建組件：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/laravel-admin-ext/wang-editor/wangEditor-3.0.10/release/wangEditor.min.css'
    ];
    protected static $js = [
        '/vendor/laravel-admin-ext/wang-editor/wangEditor-3.0.10/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}');
 // 通過 url 參數配置 debug 模式。url 中帶有 wangeditor_debug_mode=1 纔會開啓 debug 模式
//    editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0
   editor.customConfig.debug = true
editor.customConfig.uploadFileName = 'mypic';
editor.customConfig.uploadImgHeaders = {
    'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
editor.customConfig.zIndex = 0;
editor.customConfig.uploadImgServer = '/uploadimg'; //這裏是圖片上傳請求接口 路由中已經配好 否則找不到
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 7:
                toastr.error("圖片過大");
                break;
            case 6:
                toastr.error("最多可以上傳1張圖片");
                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();
    }
}

3.新建視圖文件 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>

4.然後註冊進laravel-admin

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

use App\Admin\Extensions\WangEditor;
use Encore\Admin\Form;
Form::extend('wangeditor', WangEditor::class);

5.新建圖片上傳控制器 作圖片上傳處理（我的是上傳到阿里雲）

   public function uploadImg(Request $request)
    {
        $mypic = $_FILES['mypic'];
        if (!empty($mypic)) {
            $ext = strtolower(substr($mypic['type'], strrpos($mypic['type'], '/') + 1));
            $exts = ['jpg', 'png', 'gif', 'jpeg'];
            if (!in_array($ext, $exts)) {
                $response[] = ['ResultData' => 2, 'info' => '文件類型不允許,請上傳常規的圖片(gif、jpg、jpeg與png)文件'];
                return $response;
            }

            $content = file_get_contents($mypic['tmp_name']);
            $filename = date('His') . uniqid() . "." . $ext;
            $env = config('app.env', 'local');
            $savePath = 'uploads/official/img/' . date("Y/m/d");

            $file = "/storage/{$savePath}/{$filename}";
            if ($env !== 'production') {
                $file = "/storage/$env/{$savePath}/{$filename}";
            }
            MechanicManager::upload($file, $content);
            $filenames = '你的網址' . $file;
            $response[] = ['ResultData' => 0, 'info' => '上傳成功', 'newFileName' => $filenames];
            return $response;
        }else{
            $response[] = ['ResultData' => 5, 'info' => '請選擇一個文件'];
            return $response;
        }

    }

6.路由配置

Route::post('/uploadimg', 'UploadsController@uploadimg');

7.管理後臺調用：

 public function form()
    {
        return FormBuilder::buildFrom(OfficialDevelopments::class, function (Form $form) {
            $form->wangeditor('content', '內容')->rules('required', ['required' => '必填']);
        })->get();
    }

然後就出現下圖：