默认的背包安装不附带文件管理组件。因为大多数项目都不需要它。用以下命令可以快速添加文件管理服务，将elFinder的强大功能带到您的Laravel项目中。

# require the package
composer require backpack/filemanager

# then run the installation process
php artisan backpack:filemanager:install

如果您选择安装背包/文件管理器，您将把elFinder集成到：

• TinyMCE（作为“tinymce”字段类型）
• CKEditor（作为“ckeditor”字段类型）
• CRUD（作为“浏览”和“browse_multiple”字段类型）
• 独立，在 /admin/elfinder 路由;

默认使用barryvdh/laravel-elfinder。

先F12查看【网络】是不是有些文件无法加载，这种情况下是没有在public目录下建立storage的link

运行以下命令后，在public目录下生成软连接，然后再试一下是否正常加载所有文件。

php artisan storage:link

以下是自定义视图中form部分的代码，主要是fields值获取。

其他部分代码直接复制vendor/backpack/crud下的视图即可。

@section('content')

<div class="row" bp-section="crud-operation-create">

    <div class="{{ $crud->getCreateContentClass() }}">

        {{-- Default box --}}

        @include('crud::inc.grouped_errors')

        <form method="post" action="{{ url($crud->route) }}" @if ($crud->hasUploadFields('create'))

            enctype="multipart/form-data"

            @endif

            >

            {!! csrf_field() !!}

            {{-- load the view from the application if it exists, otherwise load the one in the package --}}

            <div class="mb-3">

                <label class="form-label">Title</label>

                <input type="text" class="form-control" name="title" value="{{ $crud->fields()['title']['value'] }}" />

            </div>

            {{-- This makes sure that all field assets are loaded. --}}

            <div class="d-none" id="parentLoadedAssets">{{ json_encode(Basset::loaded()) }}</div>

            @include('crud::inc.form_save_buttons')

        </form>

    </div>

</div>

@endsection

backpack中ckeditor是pro版本才有的组件，只能自己手动集成，以下是示例代码。

{{-- load the view from the application if it exists, otherwise load the one in the package --}}

            <input type="hidden" class="form-control" name="id" value="{{ $crud->fields()['id']['value'] }}" />

            <div class="mb-3">

                <label class="form-label">Title</label>

                <input type="text" class="form-control" name="title" value="{{ $crud->fields()['title']['value'] }}" />

            </div>

            <textarea name="content" id="editor">

            {{ $crud->fields()['content']['value'] }}

            </textarea>

            {{-- This makes sure that all field assets are loaded. --}}

以下是JavaScript引入ckeditor部分

<script src="/assets/ckeditor5-build-classic-38.1.1/ckeditor5-build-classic/ckeditor.js"></script>

<script>

    ClassicEditor

        .create(document.querySelector('#editor'))

        .catch(error => {

            console.error(error);

        });

</script>

问题原因是/post/search接口发生csrf问题，但这个是官方默认的接口，这不应该。

暂时没有找到哪些配置有问题？

临时解决方案是配置中间件，

在VerifyCsrfToken中添加backpack管理后台路径，也就是排除这个uri检查csrf。

不过为了安全起见，config/backpack/base.php的route_prefix改成随机字符，这样可以隐藏后台路径。

比如我的路径是：xshfh082

在VerifyCsrfToken中添加：'/VerifyCsrfToken/*'