itech-world / sulu-grapesjs-bundle
SuluGrapesJsBundle extends the Sulu CMS to offer GrapeJS editor integration in Sulu Admin for content editing
Installs: 5
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 4
Language:JavaScript
Type:sulu-bundle
Requires
- php: ^8.2
- sulu/sulu: ^2.6
- symfony/stimulus-bundle: ^2.17
Requires (Dev)
- phpunit/phpunit: ^9.6
- symfony/debug-bundle: ^7.3
- symfony/dotenv: ^7.3
- symfony/error-handler: ^7.3
- symfony/phpunit-bridge: ^7.3
- symfony/var-dumper: ^7.3
- symfony/web-profiler-bundle: ^7.3
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.
đ¨âđģ Contact
đ License
This bundle is under the MIT License.