eZ Platform Discussions

Added the ability to add complex buttons in the rich text editor => extend the modal of a custom tag


#1

For example: I work on a multi-site. I must give the user the possibility to choose the color of his text in the rich text.

For the moment, with custom_styles I can do that:


https://doc.ezplatform.com/en/latest/guide/extending_online_editor/#custom-styles

But this tool groups block styles and inline styles.
Besides, I put 6 colors there. Actually, I have 36 to put on.
Each site(x6) has its own colors(x6). But can also access the colors of other sites.
(And of course in the admin of the site2 it is necessary that the colors of the site2 are proposed first.)

Ideally I need a tool like this:

Of course I don’t want a colorpicker!


#2

Why do you need all these colors?

Did PM on project stop to think about what the real needs are here?
As in, what does the different colors signify?

It could be that it’s different ways to signify some text, docbook has a lot of different tags, and roles on those tags, to cover those.

I’m not saying you have to add your own xsl handling and add own stuff, just saying there might be ways for you to separate content and their significant meaning, and the colors (the current design of the website).

Just a thought…


One feature that might help you a lot here is the missing feature to add classes on tags, so you can add separate meanings to certain tags. They are / where a good way to abstract this, while still being fairly simple to setup and use.

This is one of the ways you could accomplish this in legacy at least.


#3

Why do you need all these colors?

As they say in French:

“Les goûts et les couleurs ça ne se discute pas.”
~(“there’s no accounting for taste.”)

When people tell me to put 6 colours on, I say it’s stupid and then I put 6 colours on… Now I’m being asked to put 36… I say again that it’s stupid and then I look for a solution…

Indeed inline custom_tags could do the trick.
A Select to choose the site. A second to choose the color.


#4

#5

Salut @remy_php!

As you identified, what you ask is related to inline custom tags (https://portal.productboard.com/vsjzmdg4emeihrpkxcfz6nrz/c/98-support-inline-custom-tags) in this specific case.
If you need a button outside a paragraph you can definitely use the “regular” custom tag.

Let’s assume that we will have inline custom tag on 2.4. From a UX perspective, I won’t create a list like that. It will be annoying for the editor of site 3 to always click on the tab to access the colors.
I would also suggest to keep it consistent with the rest of the application: you should try to use the same approach as link. After selecting the text you see a contextual toolbar.
Maybe something like that


(the 3 rows are not clickable, just here to help the user decides what is the color he/she wants to use)

With this solution, you will stay on what is possible with Alloy Editor and you already have some examples in the product.


#6

Hey, hey, hey, hey!

Salut @sylvain.guittard

While waiting to have the so expected custom_tag inline. I thought I could start the dev of this feature by using a custom_tag block.

The question is to be able to define a custom template for this tool.

I know that the final objective is to select a color.
This color can be chosen in a free text field or a select.

Let’s start with a free text field for now

        color:
            template: 'MyBundle:fields/ezrichtext/custom_tags:color.html.twig'
            icon: '/bundles/my/images/custom_tags/color.png'
            attributes:
                color:
                    type: 'string'
                    required: true

I get in my rich text editor:

image

How to transform it into:

???

        color:
            #  These attributes do not exist and illustrate how I would have liked to set my pb.
            #admin_template: 'MyBundle:fields/ezrichtext/custom_tags:edit_color.html.twig'
            #admin_controller: 'MyBundle:admin:color' # call adminController:colorAction()

???


#7

Hi Rémy!
First you should start to define a list of options

theme:
    type: 'choice'
    default_value: ''
    required: true
    choices: ['Color 1', 'Color 2', 'Color 3','Color 4', 'Color 5', 'Color 6']

The second part is maybe a little bit more complicated. @dariusz.szut any idea how to extend the modal of a custom tag?