README

此捆绑包提供基于 GrapesJS 的 PageBuilder 解决方案。它提供

• 一个 Twig 组件，您可以在模板中使用它，例如 {{ component('PageBuilder' {'idField' : 'my_field'}) }}。此组件将创建 PageBuilder 区域。
• 一个 Page 实体和一个 PageController，允许您存储和加载生成的网页的 HTML、CSS 和 JSON 配置。
• 一个 Twig 组件，您可以使用它来渲染页面并处理动态块渲染 {{ component('PageRender', {'html' : page.html}) }}

安装

使用 composer 安装捆绑包

composer require acseo/pagebuilder-bundle

在您的 Symfony 项目中启用捆绑包

<?php
// config/bundles.php

return [
    ACSEO\PageBuilderBundle\PageBuilderBundle::class => ['all' => true],

启用 PageController 以加载/保存页面

您可以选择使用提供的默认 PageController 来加载/保存页面实体

为此，您需要在项目中启用路由

# config/routes/acseo_page_builder.yaml
acseo_page_builder:
    resource: '@PageBuilderBundle/src/Controller/'
    type: attribute

更新您的数据库以创建页面实体

使用 doctrine，根据您的策略

php bin/console doctrine:schema:update
# OR
php bin/console doctrine:migrations:diff

配置

捆绑包配置允许您管理 GrapesJS 的加载方式，以及要添加的附加 插件 或 块。

以下是一个配置文件示例

# config/packages/acseo_page_builder.yaml
acseo_page_builder:
  #
  # GrapesJS Config
  #
  # Use this to have only default values
  #
  grapesjs: ~  
  #
  # Use this to set specific values
  #
  grapesjs:
    js:             # Optional : URL of the JS file for GrapeJS. 
                    # Default : https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.7/grapes.min.js
    css:            # Optional : URL of the CSS file for GrapeJS. 
                    # Default : https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.7/css/grapes.min.css
    urlLoad:        # Optional : Route name used to load Page JSON Content. 
                    # Default : acseo_page_builder_load
    urlStore:       # Optional : Route name used to store Page JSON Content. 
                    # Default : acseo_page_builder_save
    pageController: # Optional : Controller used to load / save Pages.       
                    # Default : PageController::class 
  #
  # Plugins Config
  # Array of name, url, options
  #
  plugins:
    ## Uncomment this example to load grapesjs-preset-webpage
    #- name: grapesjs-preset-webpage
    #  url: https://cdn.jsdelivr.net.cn/npm/grapesjs-preset-webpage@1.0.3/dist/index.js                  
  #
  # Blocks Config
  # Declare your custom Blocks
  #
  blocks:
blocks:
      latest-articles:
        label: 'Latest articles'
        category: 'Extra blocks'
        media: '<svg viewBox="0 0 24 24"></svg>'
        content:
          attributes:
            'render': 'latest_articles'
          traits:
            - label: 'Number of articles'
              name: 'articles'
              type: 'text'
              value: '5'
            - label: 'Number of columns'
              name: 'columns'
              type: 'text'
              value: '2'
          content: '<div class="block">Latest articles. This block will be replaced by latest articles</div>'

动态块渲染

您可以创建一个自定义块，它允许您像 Twig 扩展方法 {{ render() }} 一样，在您的页面中调用控制器。

为此，您的块必须包含一个属性 render = 'route_name'。此块的所有属性都将作为参数发送到控制器。

此片段的输出将替换页面的原始内容。

在我们之前的示例中，自定义块 latest-articles 将生成以下 HTML

存储在页面实体中的 HTML

<!-- ... -->
<p>Lorem Ipsum</p>
<div id="ijf8l" render="latest_articles" columns="1" articles="3">
  <div class="block">
    Latest articles. This block will be replaced by latest articles
  </div>
</div>
<p>Lorem Ipsum</p>
<!-- ... -->

使用 {{ component('PageRender', {'html' : page.html}) }} 生成的 HTML

<!-- ... -->
<p>Lorem Ipsum</p>
<!-- result from the route latest_articles -->
<ul>
  <li>Article 1</li>
  <li>Article 2</li>
  <li>Article 3</li>
</ul>
<p>Lorem Ipsum</p>
<!-- ... -->

用法

为了工作，您的 Twig 页面 必须 包含一个具有 页面标识符（URI）的输入字段。

{# templates/my/page.html.twig #}

<input type="hidden" id="page_uri" value="hello-world" />
{# OR #}
<input type="text" id="page_uri" />

{{ component('PageBuilder', {'idField' : 'page_uri'}) }}

结果

如果一切顺利，您应该有一个像这样的屏幕