laravel-admin整合ueditor編輯器的圖片列表顯示問題解決方案

這篇文章主要介紹了關於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:<?phpnamespace 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<p class="form-group {!! !$errors->has($errorKey) ?: 'has-error' !!}">    <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>    <p 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')    </p></p>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.phppublic 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;    }

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！