laravel-admin集成ueditor編輯器的圖片列表顯示問題解決方法

laravel-admin集成ueditor推薦使用laravel-u-editor，它是ueditor的laravel composer版本。基於UEditor 1.4.3.3開發，支持en、zh_CN、zh_TW，而且支持本地和七牛雲存儲，默認爲本地上傳 public/uploads

安裝

composer require stevenyangecho/laravel-u-editor
而後在config/app.php的providers下增長一行
Stevenyangecho\UEditor\UEditorServiceProvider::class
執行
php artisan vendor:publish

基本配置

1.增長組件文件：app/Admin/Extensions/Form/uEditor.php:

<?php
namespace App\Admin\Extensions\Form;
use Encore\Admin\Form\Field;

/**
 * 百度編輯器
 * Class uEditor
 * @package App\Admin\Extensions\Form
 */
class uEditor extends Field
{
    // 定義視圖
    protected $view = 'admin.uEditor';

    // css資源
    protected static $css = [];

    // js資源
    protected static $js = [
        'laravel-u-editor/ueditor.config.js',
        'laravel-u-editor/ueditor.all.min.js',
        'laravel-u-editor/lang/zh-cn/zh-cn.js'
    ];

    public function render()
    {
        $cs=csrf_token();
        $this->script = <<<EOT
        //解決第二次進入加載不出來的問題
        UE.delEditor("ueditor");
        // 默認id是ueditor
        var ue = UE.getEditor('ueditor'); 
        ue.ready(function () {
            ue.execCommand('serverparam', '_token', '$cs');
        });

EOT;
        return parent::render();
    }
}



2. 增長視圖文件： resources/views/admin/uEditor.blade.php

<div class="form-group {!! !$errors->has($errorKey) ?: 'has-error' !!}">
    <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>
    <div class="col-sm-8">
        @include('admin::form.error')
        {{-- 這個style能夠限制他的高度，不會隨着內容變長 --}}
        <textarea type='text/plain' style="height:400px;" id='ueditor' id="{{$id}}" name="{{$name}}" placeholder="{{ $placeholder }}" {!! $attributes !!}  class='ueditor'>
            {!! old($column, $value) !!}
        </textarea>
        @include('admin::form.help-block')
    </div>
</div>

3. 而後註冊進laravel-admin,在app/Admin/bootstrap.php中添加如下代碼：

use App\Admin\Extensions\Form\uEditor;
Encore\Admin\Form::extend('ueditor', uEditor::class);

4. 調用：
$form->ueditor('content', '內容')->rules('required');

配置七牛服務

打開文件config\UEditorUpload.php配置七牛配置參數

// 將下一行註釋
//        'mode'=>'local',//上傳方式,local 爲本地   qiniu 爲七牛
        'mode'=>'qiniu',//上傳方式,local 爲本地   qiniu 爲七牛

        //七牛配置,若mode='qiniu',如下爲必填.
        'qiniu'=>[
            'accessKey'=>'。。。',
            'secretKey'=>'。。。',
            'bucket'=>'。。。',
            'url'=>'。。。',//七牛分配的CDN域名,注意帶上http://

        ]
    ],

修復上傳界面中沒法管理文件列表的問題

vendor\stevenyangecho\laravel-u-editor\src\ListsQiniu.php
public function getList()
    {
        $size = $this->request->get('size', $this->listSize);
        $start = $this->request->get('start', '');
        $auth = new Auth(config('UEditorUpload.core.qiniu.accessKey'), config('UEditorUpload.core.qiniu.secretKey'));

        $bucketManager = new BucketManager($auth);
        // 註釋掉下面的行
//        list($items, $marker, $error) = $bucketManager->listFiles(config('UEditorUpload.core.qiniu.bucket'), $this->path, $start, $size);
// 下面三行是修改的
        $result1 = $bucketManager->listFiles(config('UEditorUpload.core.qiniu.bucket'), $this->path, $start, $size);
        $size = count($result1);
        // 若是不取到items，報找不到key的錯誤
        $items = $result1[0]['items'];
// 判斷是否錯誤
        if ($size > 2) {
            return [
                "state" => $error->message(),
                "list" => array(),
                "start" => $start,
                "total" => 0
            ];
        }
        if(empty($items)){
            return [
                "state" => "no match file",
                "list" => array(),
                "start" => $start,
                "total" => 0
            ];
        }

        $files=[];
//        dd($items['items']);
        foreach ($items as  $v) {
            if (preg_match("/\.(" . $this->allowFiles . ")$/i", $v['key'])) {
                $files[] = array(
                    'url' =>rtrim(config('UEditorUpload.core.qiniu.url'),'/').'/'.$v['key'],
                    'mtime' => $v['mimeType'],
                );
            }
        }
        if(empty($files)){
            return [
                "state" => "no match file",
                "list" => array(),
                "start" => $start,
                "total" => 0
            ];
        }
        /* 返回數據 */
        $result = [
            "state" => "SUCCESS",
            "list" => $files,
            "start" => $start,
            "total" => count($files)
        ];

        return $result;
    }