README

与 umanit/block-bundle 一起使用的一组可用的块。

先决条件

1. 安装和配置 FOSCKEditorBundle
2. 安装和配置 ArtgrisMediaBundle
   • 由于所有资产都已在当前包中重写，因此无需安装资产，您只需声明包及其路由。
3. 安装和配置 UmanitBlockBundle

前端需求

• 使用 Symfony UX

安装

将包注册到您的 config/bundles.php

<?php

return [
    // ...
    Umanit\BlockCollectionBundle\UmanitBlockCollectionBundle::class => ['all' => true],
];

添加 Twig 的一个表单主题

# config/packages/twig.yaml
twig:
    form_themes:
        # When using Sylius, the only available for the moment
        - '@UmanitBlockCollection/sylius/artgris/field_media.html.twig'

在您的 package.json 中添加 @umanit/block-collection-bundle 开发依赖。如果您在项目中使用 Flex，这部分将自动完成。

{
  //...
  "devDependencies": {
    // ...
    "@umanit/block-collection-bundle": "file:vendor/umanit/block-collection-bundle/Resources/assets"
  }
}

将刺激控制器添加到您的 assets/controllers.json。如果您在项目中使用 Flex，这部分将自动完成。

{
  "controllers": {
    // ...
    "@umanit/block-collection-bundle": {
      "collection": {
        "enabled": true,
        "fetch": "eager"
      },
      "ckeditor": {
        "enabled": true,
        "fetch": "eager"
      },
      "crop": {
        "enabled": true,
        "fetch": "eager",
        "autoimport": {
          "cropperjs/dist/cropper.min.css": true
        }
      },
      "file-manager": {
        "enabled": true,
        "fetch": "eager"
      },
      "media": {
        "enabled": true,
        "fetch": "eager"
      },
      "modal": {
        "enabled": true,
        "fetch": "eager",
        "autoimport": {
          "@umanit/block-collection-bundle/src/modal-style.css": true
        }
      }
    }
  }
  // ...
}

不要忘记安装和编译 JavaScript 依赖项

yarn install --force
yarn encore dev

可用的块

常见问题解答

一组问题/答案。

答案字段使用来自 FOSCKEditorBundle 的 CKEditorType。

图像

一个带有 alt 字段的图像。表单类型使用来自 ArtgrisMediaBundle 的 MediaType。

图像集合

一组图像（目前没有 alt 字段？）。表单类型使用来自 ArtgrisMediaBundle 的 MediaCollectionType。

链接

一个简单的 URL 及其关联的标签。

引用

一个 blockquote 及可选的作者。

三联画

由标题、wysiwyg 文本和带有 alt 字段的图像组成的块。

文本表单类型使用来自 FOSCKEditorBundle 的 CKEditorType。

图像表单类型使用来自 ArtgrisMediaBundle 的 MediaType。

视频

到 YouTube 或 Vimeo 的链接，以在 iframe 中渲染播放器。

WYSIWYG

使用来自 FOSCKEditorBundle 的 CKEditorType 的 WYSIWYG。

自定义块

FormType

您可以使用 Symfony 表单类型扩展 修改任何可用的表单类型。

渲染

您可以通过覆盖任何 Twig 模板来自定义每个块的渲染。默认路径将是 templates/bundles/UmanitBlockCollectionBundle/blocks/。

工具 - TwigRenderableTrait

如果您需要创建自己的块，您可以在块管理器中使用 Umanit\BlockCollectionBundle\BlockManager\TwigRenderableTrait。

这将允许您使用Twig视图来渲染您的块。您需要做的只是定义管理器中的属性 protected $template，它应该是放置在 templates/bundles/UmanitBlockCollectionBundle/blocks/ 目录下（不包括后缀 .html.twig）的视图名称。

例如，使用此管理器

<?php

declare(strict_types=1);

namespace App\BlockManager;

use App\Entity\Block\Simple;
use App\Form\Type\Block\SimpleType;
use Umanit\BlockBundle\Block\AbstractBlockManager;

class SimpleBlockManager extends AbstractBlockManager
{
    use TwigRenderableTrait;

    /** @var string */
    protected $template = 'simple';

    public function getManagedBlockType(): string
    {
        return Simple::class;
    }

    public function getManagedFormType(): string
    {
        return SimpleType::class;
    }
}

一旦实体和表单类型创建完成，我们只需要创建视图 templates/bundles/UmanitBlockCollectionBundle/blocks/simple.html.twig。