Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/acseo/pagebuilderbundle
This bundle provides a PageBuilder Solution for Symfony (built on top of GrapesJS : https://grapesjs.com)
https://github.com/acseo/pagebuilderbundle
grapesjs pagebuilder symfony symfony-bundle
Last synced: 2 months ago
JSON representation
This bundle provides a PageBuilder Solution for Symfony (built on top of GrapesJS : https://grapesjs.com)
- Host: GitHub
- URL: https://github.com/acseo/pagebuilderbundle
- Owner: acseo
- License: mit
- Created: 2023-10-09T19:04:49.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-19T09:21:58.000Z (about 1 year ago)
- Last Synced: 2024-09-30T16:04:38.060Z (3 months ago)
- Topics: grapesjs, pagebuilder, symfony, symfony-bundle
- Language: PHP
- Homepage:
- Size: 74.2 KB
- Stars: 10
- Watchers: 4
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ACSEO PageBuilder Bundle
This bundle provides a PageBuilder Solution built on top of [GrapesJS](https://grapesjs.com/). it provides :
* a **Twig Component** that you can use in your template with `{{ component('PageBuilder' {'idField' : 'my_field'}) }}`. This component will create the PageBuilder area.
* a `Page` Entity and a `PageController` that will allow you to store and load the HTML, CSS, and JSON config of the generated Web page.
* a **Twig Component** that you can use to render the page and handle dynamic block rendering `{{ component('PageRender', {'html' : page.html}) }}`
## Installation
### Install the bundle using composer
```bash
composer require acseo/pagebuilder-bundle
````
Enable the bundle in you Symfony project
```php
['all' => true],
```
### Enable PageController to Load / Save Pages
You can choose to use the default `PageController` provided in order to load / save the Page entities
To do so, you need to enable the route in your project :
```yaml
# config/routes/acseo_page_builder.yaml
acseo_page_builder:
resource: '@PageBuilderBundle/src/Controller/'
type: attribute
```
### Update your database to create the Page Entity
With doctrine, according to your strategy :
```bash
php bin/console doctrine:schema:update
# OR
php bin/console doctrine:migrations:diff
```
# Configuration
The Bundle configuration allows you to manage how GrapesJS will be **loaded**, and what additionnal **plugins** or **blocks** will be added
Here is an example of a configuration file :
```yaml
# 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/npm/[email protected]/dist/index.js
#
# Blocks Config
# Declare your custom Blocks
#
blocks:
blocks:
latest-articles:
label: 'Latest articles'
category: 'Extra blocks'
media: ''
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: '
Latest articles. This block will be replaced by latest articles'
```
## Dynamic block rendering
You can create a custom block that will allow you, like the Twig extension method `{{ render() }}`, to make a call to a Controller inside your page.
To do so, your block must contain an attribute `render = 'route_name'`. All the attributes of this block will be sent as arguments to the Controller.
The generated output of this fragment will replace the original content of the page.
In our previous example, the custom block `latest-articles` will generate the following HTML :
Stored HTML in Page Entity :
```html
Lorem Ipsum
Latest articles. This block will be replaced by latest articles
Lorem Ipsum
```
Generated HTML with `{{ component('PageRender', {'html' : page.html}) }}`
```html
Lorem Ipsum
- Article 1
- Article 2
- Article 3
Lorem Ipsum
```
# Usage
In order to work, your Twig page **must** contain an input field with the *page identifier* (the URI).
```twig
{# templates/my/page.html.twig #}
{# OR #}
{{ component('PageBuilder', {'idField' : 'page_uri'}) }}
```
# Result
If everything goes well, you should have a screen like this :
