>백엔드 개발 >PHP 튜토리얼 >laravel-admin 통합 사용자 편집기에서 이미지 목록 표시 문제 해결

laravel-admin 통합 사용자 편집기에서 이미지 목록 표시 문제 해결

不言
不言원래의
2018-07-06 17:31:293388검색

이 글은 laravel-admin 통합 ueditor 편집기의 사진 목록 표시 문제에 대한 해결 방법을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다. ueditor의 laravel 작곡가 버전인 laravel-u-editor를 권장합니다. UEditor 1.4.3.3을 기반으로 개발되었으며, en, zh_CN, zh_TW를 지원하고 로컬 및 Qiniu 클라우드 저장소를 지원합니다. 기본값은 로컬 업로드 공개/업로드

Installation

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 = &#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;);

Qiniu 서비스 구성

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

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

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

        ]
    ],

업로드 수정입니다. 인터페이스에서 파일 목록을 관리할 수 없는 문제

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

        $bucketManager = new BucketManager($auth);
        // 注释掉下面的行
//        list($items, $marker, $error) = $bucketManager->listFiles(config(&#39;UEditorUpload.core.qiniu.bucket&#39;), $this->path, $start, $size);
// 下面三行是修改的
        $result1 = $bucketManager->listFiles(config(&#39;UEditorUpload.core.qiniu.bucket&#39;), $this->path, $start, $size);
        $size = count($result1);
        // 如果不取到items,报找不到key的错误
        $items = $result1[0][&#39;items&#39;];
// 判断是否错误
        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[&#39;items&#39;]);
        foreach ($items as  $v) {
            if (preg_match("/\.(" . $this->allowFiles . ")$/i", $v[&#39;key&#39;])) {
                $files[] = array(
                    &#39;url&#39; =>rtrim(config(&#39;UEditorUpload.core.qiniu.url&#39;),&#39;/&#39;).&#39;/&#39;.$v[&#39;key&#39;],
                    &#39;mtime&#39; => $v[&#39;mimeType&#39;],
                );
            }
        }
        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;
    }

이상이 이 글의 전체 내용입니다. 더 많은 관련 내용을 보시려면 PHP 중국어 사이트를 주목해주세요!

관련 권장 사항:

laravel-admin에서 양식 편집 시 현재 값을 자동으로 선택할 수 없는 문제에 대한 해결 방법


gitbash PHP 실행 출력 중국어 무작위 코딩에 대한 해결 방법

위 내용은 laravel-admin 통합 사용자 편집기에서 이미지 목록 표시 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.