README

GrapesJS Bundle for Sulu

Developed by Steeven THOMAS

SuluGrapesJsBundle extends the Sulu CMS to offer GrapesJS editor integration in Sulu Admin for content editing

📂 Requirements

• PHP ^8.2
• Sulu ^2.6.*

🛠️ Features

• Add Builder template page in Sulu Admin
• GrapesJS integration in Sulu Admin for content editing (only BODY content)
• Builder button in Sulu Admin for open a new tab with the Builder
• Builder in Sulu Preview (⚠️ Experimental approach – works, but not recommended for production)
• Asset Manager in Builder (ℹ️ Currently, you have access to all images and documents from Sulu. Soon, we will add video from Sulu and Youtube)

🇬🇧 Available translations

• English
• French
• German

📦 GrapesJS Dependencies

• GrapesJS Open Source Editor
• GrapesJS blocks basic
• GrapesJS style bg
• Grapick
• GrapesJS custom code
• GrapesJS tooltip
• GrapesJS typed
• GrapesJS style-filter
• GrapesJS countdown
• GrapesJS tui image editor
• GrapesJS object fit
• GrapesJS rte toolbar extensions

📝 Installation

Composer

composer require itech-world/sulu-grapesjs-bundle

Symfony Flex

If you don't use Symfony Flex, you can add the bundle to your config/bundles.php file:

return [
    // ...
    ItechWorld\SuluGrapesJsBundle\ItechWorldSuluGrapesJsBundle::class => true,
];

Symfony symlink

php bin/console assets:install --symlink

Configuration

FRONT

Create a config/packages/itech_world_sulu_grapejs.yaml file with the following content:

itech_world_sulu_grapes_js:
    frontend_css_path: '/styles/app.css' # Path to the front CSS file
    frontend_js_path: '/js/app.js' # Path to the front JS file
    images_formats: # Images formats to use in the editor
        1920x: '1920x'
        sulu-400x400: 'sulu-400x400'

BACK

Edit the config/routes.yaml file to add the bundle to the list of routes:

itech_world_sulu_grapesjs:
    resource: '@ItechWorldSuluGrapesJsBundle/src/Controller/'
    type: attribute

Edit the assets/admin/package.json to add the bundle to the list of bundles:

{
    "dependencies": {
        // ...
        "sulu-itech-world-sulu-grapesjs-bundle": "file:../../vendor/itech-world/sulu-grapesjs-bundle/public/js"
    }
}

Edit the assets/admin/app.js to add the bundle in imports:

import 'sulu-itech-world-sulu-grapesjs-bundle';

In the assets/admin/ folder, run the following command:

npm install
npm run build

or

yarn install
yarn build

⚠️ Add builder in Preview

If you want, you can add the Builder in Sulu Preview.

This is not the best way to do it, but it works. We recommend to use the Builder button in the Sulu Admin to open a new tab with the Builder

For that, create a templates/bundles/SuluWebsiteBundle/Preview/preview.html.twig file with the following content:

{% extends "@!SuluWebsite/Preview/preview.html.twig" %}

{% block style %}
    {{ parent() }}
    {% if template == 'builder' %}
        {% include "@ItechWorldSuluGrapesJs/components/_builder_css.html.twig" %}
    {% endif %}
{% endblock %}

{% block content %}
    {% if template == 'builder' %}
        {% include "@ItechWorldSuluGrapesJs/components/_builder_sulu_navbar.html.twig" %}
        {% include "@ItechWorldSuluGrapesJs/components/_builder_sulu_body.html.twig" with {
            json_builder_html: content.json_builder_html,
            json_builder_css: content.json_builder_css,
            locale: request.defaultLocale,
            webspace: request.webspaceKey,
            id: id,
            translations: translations,
            frontend_css_path: frontend_css_path,
            frontend_js_path: frontend_js_path,
            previewContentReplacer: previewContentReplacer,
        } %}
    {% else %}
        {{ previewContentReplacer|raw }}
        {{ parent() }}
        {{ previewContentReplacer|raw }}
    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% if template == 'builder' %}
        {% include "@ItechWorldSuluGrapesJs/components/_builder_js.html.twig" %}
    {% endif %}
{% endblock %}

🐛 Bug and Idea

See the open issues for a list of proposed features (and known issues).

💰 Support me

You can buy me a coffee to support me this plugin is 100% free.

Buy me a coffee

👨‍💻 Contact

📘  License

This bundle is under the MIT License.