monsieurbiz / sylius-rich-editor-plugin
A Rich Editor plugin for Sylius.
Installs: 114 479
Dependents: 2
Suggesters: 0
Security: 0
Stars: 53
Watchers: 11
Forks: 26
Open Issues: 21
Type:sylius-plugin
Requires
- php: ~7.4|~8.0|~8.1
- ext-intl: *
- ext-json: *
- sylius/sylius: >=1.8 <1.13
Requires (Dev)
- behat/behat: ^3.6.1
- behat/mink-selenium2-driver: ^1.4
- dmore/behat-chrome-extension: ^1.3
- dmore/chrome-mink-driver: ^2.7
- doctrine/data-fixtures: ^1.4
- ergebnis/composer-normalize: ^2.5
- friends-of-behat/mink: ^1.8
- friends-of-behat/mink-browserkit-driver: ^1.4
- friends-of-behat/mink-extension: ^2.4
- friends-of-behat/page-object-extension: ^0.3
- friends-of-behat/symfony-extension: ^2.1
- friends-of-behat/variadic-extension: ^1.3
- hwi/oauth-bundle: ^1.1
- lchrusciel/api-test-case: ^5.0
- matthiasnoback/symfony-config-test: ^4.2
- matthiasnoback/symfony-dependency-injection-test: ^4.1
- mikey179/vfsstream: ^1.6
- mockery/mockery: ^1.4
- pamil/prophecy-common: ^0.1
- phpmd/phpmd: @stable
- phpspec/phpspec: ^6.1|^7.2
- phpstan/phpstan: ^0.12.57
- phpstan/phpstan-doctrine: ^0.12.19
- phpstan/phpstan-webmozart-assert: ^0.12.7
- phpunit/phpunit: ^8.5
- psalm/plugin-mockery: ^0.3
- psr/event-dispatcher: ^1.0
- sylius-labs/coding-standard: ^3.1
- symfony/browser-kit: ^4.4
- symfony/debug-bundle: ^4.4
- symfony/dotenv: ^4.4
- symfony/flex: ^1.7
- symfony/web-profiler-bundle: ^4.4
- v2.1.0
- dev-master / 2.0.x-dev
- v2.0.15
- v2.0.14
- v2.0.13
- v2.0.12
- v2.0.11
- v2.0.10
- v2.0.9
- v2.0.8
- v2.0.7
- v2.0.6
- v2.0.5
- v2.0.4
- v2.0.3
- v2.0.2
- v2.0.1
- v2.0.0
- v2.0.0-RC.14
- v2.0.0-RC.13
- v2.0.0-RC.12
- v2.0.0-RC.11
- v2.0.0-RC.10
- v2.0.0-RC.9
- v2.0.0-RC.8
- v2.0.0-RC.7
- v2.0.0-RC.6
- v2.0.0-RC.5
- v2.0.0-RC.4
- v2.0.0-RC.3
- v2.0.0-RC.2
- v2.0.0-RC.1
- v1.2.0
- 1.1.1
- 1.1.0
- 1.0.x-dev
- 1.0.0
- 0.1.0
This package is auto-updated.
Last update: 2023-02-02 10:17:27 UTC
README
Rich Editor
This plugin adds a rich editor on the fields you want. Now you can manage your content very easily!
Installation
composer require monsieurbiz/sylius-rich-editor-plugin
Change your config/bundles.php
file to add the line for the plugin :
<?php return [ //.. MonsieurBiz\SyliusRichEditorPlugin\MonsieurBizSyliusRichEditorPlugin::class => ['all' => true], ];
Then create the config file in config/packages/monsieurbiz_sylius_rich_editor_plugin.yaml
:
imports: - { resource: "@MonsieurBizSyliusRichEditorPlugin/Resources/config/config.yaml" }
Finally import the routes in config/routes/monsieurbiz_sylius_rich_editor_plugin.yaml
:
monsieurbiz_richeditor_admin: resource: "@MonsieurBizSyliusRichEditorPlugin/Resources/config/routing/admin.yaml" prefix: /%sylius_admin.path_name%
And install the assets
bin/console asset:install
Use the Rich Editor
Update your form type
To make a field use the rich editor, you must use the RichEditorType
type for it.
We have an example of implementation in the test application.
If your field has some data already, like some previous text before installing this plugin, then we will convert it for you as an HTML Element which contains… HTML.
This way you will be able to use our plugin right away without risking any data lost!
Call twig render
To display the content of the rich editor field you must call the twig filter:
{{ content | monsieurbiz_richeditor_render_field }}
You can see an example in the test application
Custom rendering of elements
You can also render your elements with some custom DOM around that. To do so, you have access to a twig filter that gives you the elements list :
{% set elements = monsieurbiz_richeditor_get_elements(content) %}
And then you can either render them all :
{{ elements|monsieurbiz_richeditor_render_elements }}
Or one by one :
{% for element in elements %} {{ element|monsieurbiz_richeditor_render_element }} {% endfor %}
Filter the elements
If you want to filter the elements which are available for your field, you can use the tags
option when you build your form.
As example:
$builder->add('description', RichEditorType::class, [ 'required' => false, 'label' => 'sylius.form.product.description', 'tags' => ['product'], ]);
In that example, only the Ui Elements with the tag product
will be available.
Don't worry, you can add this filter afterwards, we won't remove the already present Ui Elements of your field. But we
won't allow to add more if they don't have one of the allowed tags!
Example of setting tags to an Ui Element using yaml
monsieurbiz_sylius_richeditor: ui_elements: app.my_element: # … tags: ['product']
Deactivate an available element
Here is what really happens when deactivating an Ui Element:
- it's not displayed anymore in frontend
- it's still editable in backend for old contents but you can't add a new one
- if the element has an alias, the alias is treated the same way
Define the overload of a proposed UiElement in your configuration folder, let's say in config/packages/monsieurbiz_sylius_richeditor_plugin.yaml
as example.
monsieurbiz_sylius_richeditor: ui_elements: monsieurbiz.youtube: enabled: false
Available elements
The plugin already contains some simple elements.
HTML Element
Text element
Quote element
Image element
Video element
Button element
Title element
Separator element
Youtube element
Image collection element
Example of a rich product description
Admin form with preview
Front display
Create your own elements
In this example, we will add a Google Maps element.
Define your UiElement
Define your UiElement in your configuration folder, let's say in config/packages/monsieurbiz_sylius_richeditor_plugin.yaml
as example.
monsieurbiz_sylius_richeditor: ui_elements: app.google_maps: title: 'app.ui_element.google_maps.title' description: 'app.ui_element.google_maps.description' icon: map pin classes: form: App\Form\Type\UiElement\GoogleMapsType #ui_element: App\UiElement\MyUiElement templates: admin_render: '/Admin/UiElement/google_maps.html.twig' front_render: '/Shop/UiElement/google_maps.html.twig' tags: []
You can use your own Ui Element object if needed. Be sure to implement the
\MonsieurBiz\SyliusRichEditorPlugin\UiElement\UiElementInterface
interface.
A trait is there for you 🤗 as well. This is very useful when you need to do some custom work in your templates, it's like
having a helper around. The Ui Element is then available via the ui_element
variable in your templates.
Create the Form Type we use in admin to fill your UiElement
<?php declare(strict_types=1); namespace App\Form\Type\UiElement; use Symfony\Component\Form\AbstractType; use Symfony\Component\Form\Extension\Core\Type\TextType; use Symfony\Component\Form\FormBuilderInterface; use Symfony\Component\Validator\Constraints as Assert; class GoogleMapsType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options) { $builder ->add('link', TextType::class, [ 'label' => 'app.ui_element.google_maps.link', 'required' => true, 'constraints' => [ new Assert\NotBlank(), ], ]) ; } }
Add your translations of course
Here is an example of possible translation for the GMap element :
app: ui_element: google_maps: title: 'Google Maps Element' short_description: 'Include a Google Maps' description: 'An element with a Google Maps link' link: 'Link'
Create the templates to render it in front and in admin
You have to create a template for the front and also for the admin's preview.
Here is an example of a simple template for this our which can be used in front and admin:
<iframe id="gmap_canvas" src="{{ element.link }}" scrolling="no" marginheight="0" marginwidth="0" width="600" height="500" frameborder="0"></iframe>
The result !
The element is in the UI Elements list
You now have a form to edit it (your form!)
And we use your templates to render your UiElement
In admin :
In front :
File in fixtures management
In some cases you will want to add UI elements to your content fixtures which are Rich Editor fields. If you need files in your UI elements, you can use a dedicated fixture. It is used as follows.
sylius_fixtures: suites: my_project: fixtures: my_files: name: monsieurbiz_rich_editor_file options: files: - source_path: 'src/Resources/fixtures/bar1.png' target_path: 'image/foo/bar1.png' - source_path: 'src/Resources/fixtures/file.pdf' target_path: 'baz/file.pdf'
The exemple below will copy files to public/media/image/foo/bar1.png
and public/media/foo/file.pdf
.
Now you can use files in your content fixtures:
description: | [{ "code": "app.my_ui_element", "data": { "title": "My title", "image": "/media/image/foo/bar1.png", "file": "/media/baz/file.pdf" } }]
Contributing
You can open an issue or a Pull Request if you want! 😘
Thank you!