README

Symfony UX异步文档上传表单类型，使用ArtgrisFileManager，这是一个无需使用大多数依赖项（如jQuery / jQuery UI / Font awesome等）即可工作的MediaBundle版本（但仍然需要bootstrap 5）

安装

开始之前，请确保您已在应用程序中配置了StimulusBundle。

使用Composer和Symfony Flex安装此包

composer require arkounay/ux-media

如果您使用WebpackEncore，请安装您的资产并重新启动Encore（如果您使用AssetMapper则不需要）

npm install --force
npm run watch

# or use yarn
yarn install --force
yarn watch

配置前提条件

此包使用FileManagerBundle。请确保其路由已启用，以及UxMedia路由

routing.yaml:

artgris_file_manager:
    resource: "@ArtgrisFileManagerBundle/Controller"
    type:     attribute
    prefix:   /admin/manager

ux_media:
    resource: "@ArkounayUxMediaBundle/Controller"
    type:     attribute
    prefix:   /admin/ux-media

此外，请确保您已定义conf配置

packages/artgris_file_manager.yaml:

artgris_file_manager:
    conf:
        default:
            dir: '%kernel.project_dir%/public/uploads'

如果您的项目不使用bootstrap，您需要启用bootstrap_modal控制器并启用scss

• 将Encore.enableSassLoader()添加到您的webpack.config.js文件中
• 安装sass yarn add sass-loader@^12.0.0 sass --dev

并导入正确的bootstrap scss类

{
    "controllers": {
        "@arkounay/ux-collection": {
            "collection": {
                "enabled": true,
                "fetch": "eager",
                "autoimport": {
                    "@arkounay/ux-collection/src/style.css": true,
                    "@arkounay/ux-collection/src/style-when-not-using-bootstrap-5.css": false
                }
            }
        },
        "@arkounay/ux-media": {
            "media": {
                "enabled": true,
                "fetch": "eager",
                "autoimport": {
                    "@arkounay/ux-media/src/style.css": true
                }
            },
            "upload": {
                "enabled": true,
                "fetch": "eager"
            },
            "crop": {
                "enabled": true,
                "fetch": "eager",
                "autoimport": {
                    "cropperjs/dist/cropper.min.css": true,
                    "@arkounay/ux-media/src/crop_style.css": true
                }
            },
            "bootstrap_modal": {
                "enabled": true,
                "fetch": "eager",
                "autoimport": {
                    "@arkounay/ux-media/src/bootstrap_modal.scss": true
                }
            }
        }
    },
    "entrypoints": []
}

使用

与Artgris/MediaBundle类似，除了您必须使用UxMediaType和UxMediaCollectionType

$builder->add('Media', UxMediaType::class, [
    'conf' => 'default',
    'display_file_manager' => true,
    'display_clear_button' => true,
    'allow_crop' => true,
    'crop_options' => [
        'display_crop_data' => true,
        'allow_flip' => true,
        'allow_rotation' => true,
        'ratio' => false,
    ]
])

EasyAdmin集成

对于easyadmin 3+，您需要手动指定表单主题，通过在您的DashboardController中覆盖configureCrud来添加主题@ArkounayUxCollection/ux_collection_form_theme.html.twig和@ArkounayUxMedia/ux_media_form_theme.html.twig

public function configureCrud(): Crud
{
    return Crud::new()
        ->addFormTheme('@ArkounayUxCollection/ux_collection_form_theme.html.twig')
        ->addFormTheme('@ArkounayUxMedia/ux_media_form_theme.html.twig')
    ;
}

如果您使用WebpackEncore，您将需要配置您的管理员使用它，以便考虑Symfony UX，例如

public function configureAssets(Assets $assets): Assets
{
    return parent::configureAssets($assets)
        ->addWebpackEncoreEntry('app');
}