Skip to content

This plugin add a rich editor on fields to be able to drag and drop elements and edit it.

License

Notifications You must be signed in to change notification settings

Creatiwity/SyliusRichEditorPlugin

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Monsieur Biz logo      Sylius logo
Monsieur Biz is a Sylius Extension Artisan partner

Rich Editor

Rich Editor Plugin license Tests Status Security Status

This plugin adds a rich editor on the fields you want. Now you can manage your content very easily!

Example of rich editor field

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 file for 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.

Example of a rich editor field

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 file for 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' => ['-default', 'product'],
]);

In that example, all Ui Elements with the tag default will be excluded, then the Ui Elements with the tag product will be included.
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!

Order matters

The order of the tags matters! The first tag will be less important then the second.
As example, if you have 3 Ui Elements with the following tags:

  • element1: tag1, tag2, tag3
  • element2: tag1, tag2
  • element3: tag2, tag3

And you set the tags of your field to -tag1, tag2, -tag3, then the only available Ui Element will be: element2.
They all have the tag2 to include them, but the element1 and element3 have the tag3 which is excluding them after being both included.

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

The HTML element

Text element

The text element

Quote element

The quote element

Image element

The image element

Video element

The video element

Button element

The button element

Title element

The title element

Separator element

The separator element

Youtube element

The Youtube element

Image collection element

The Image collection element

Example of a rich product description

Admin form with preview

Admin full form

Front display

Front full 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

The Google Maps element

You now have a form to edit it (your form!)

The Google Maps form

And we use your templates to render your UiElement

In admin :

The GMap display

In front :

The GMap display

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!

About

This plugin add a rich editor on fields to be able to drag and drop elements and edit it.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • PHP 62.0%
  • Twig 16.3%
  • JavaScript 14.7%
  • Makefile 4.2%
  • SCSS 2.8%