Solution au problème d'affichage de la liste d'images dans l'éditeur intégré de laravel-admin

Cet article présente principalement la solution au problème d'affichage de la liste d'images de l'éditeur intégré de laravel-admin. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

. laravel -Admin intègre ueditor et il est recommandé d'utiliser laravel-u-editor, qui est la version laravel composer de ueditor. Développé sur la base de UEditor 1.4.3.3, prend en charge en, zh_CN, zh_TW et prend en charge le stockage cloud local et Qiniu. La valeur par défaut est le téléchargement local public/uploads

Installation

composer require stevenyangecho/laravel-u-editor
然后在config/app.php的providers下增加一行
Stevenyangecho\UEditor\UEditorServiceProvider::class
执行
php artisan vendor:publish

Configuration de base<. 🎜 >

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 = &#39;admin.uEditor&#39;;

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

    // js资源
    protected static $js = [
        &#39;laravel-u-editor/ueditor.config.js&#39;,
        &#39;laravel-u-editor/ueditor.all.min.js&#39;,
        &#39;laravel-u-editor/lang/zh-cn/zh-cn.js&#39;
    ];

    public function render()
    {
        $cs=csrf_token();
        $this->script = <<<EOT
        //解决第二次进入加载不出来的问题
        UE.delEditor("ueditor");
        // 默认id是ueditor
        var ue = UE.getEditor(&#39;ueditor&#39;); 
        ue.ready(function () {
            ue.execCommand(&#39;serverparam&#39;, &#39;_token&#39;, &#39;$cs&#39;);
        });

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



2. 增加视图文件： resources/views/admin/uEditor.blade.php

<p class="form-group {!! !$errors->has($errorKey) ?: &#39;has-error&#39; !!}">
    <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>
    <p class="col-sm-8">
        @include(&#39;admin::form.error&#39;)
        {{-- 这个style可以限制他的高度，不会随着内容变长 --}}
        <textarea type=&#39;text/plain&#39; style="height:400px;" id=&#39;ueditor&#39; id="{{$id}}" name="{{$name}}" placeholder="{{ $placeholder }}" {!! $attributes !!}  class=&#39;ueditor&#39;>
            {!! old($column, $value) !!}
        </textarea>
        @include(&#39;admin::form.help-block&#39;)
    </p>
</p>

3. 然后注册进laravel-admin,在app/Admin/bootstrap.php中添加以下代码：

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

4. 调用：
$form->ueditor(&#39;content&#39;, &#39;内容&#39;)->rules(&#39;required&#39;);

Configuration du service Qiniu

打开文件config\UEditorUpload.php配置七牛配置参数

// 将下一行注释
//        'mode'=>'local',//上传方式,local 为本地   qiniu 为七牛
        'mode'=>'qiniu',//上传方式,local 为本地   qiniu 为七牛

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

        ]
    ],

Correction du problème selon lequel la liste de fichiers ne peut pas être gérée dans l'interface de téléchargement

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

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde. L'apprentissage est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Résoudre le problème selon lequel la sélection dans laravel-admin ne peut pas sélectionner automatiquement la valeur actuelle lors de la modification du formulaire

Gitbash PHP exécute une solution de codage aléatoire chinoise

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!