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?


#8

TODO : https://ezplatform.com/blog/extending-ez-platform-online-editor


#9

Salut ici :slight_smile:

The custom_tag inline are out. It’s time to set up the color picker :wink:

ezrichtext: 
    custom_tags:
        color:
            is_inline: true
            template: 'MyBundle:fields/ezrichtext/custom_tags:inline.html.twig'
            icon: '/bundles/ezplatformadminui/img/ez-icons.svg#view-grid'
            attributes:
                color:
                    type: 'choice'
                    choices:
                      - ''
                      - red
                      - green
                      - blue
                      - site1_color_1
                      - site1_color_2
                      - site1_color_3
                      - site1_color_4
                      - site1_color_5
                      - site1_color_6
                      - site2_color_1
                      - site2_color_2
                      - site2_color_3
                      - site2_color_4
                      - site2_color_5
                      - site2_color_6
                    required: true

I only put 15 colors here.
But I have a lot more.
And a select one with tons of options is not very sexy.

So…:

my/admin.js

var colors = {
    'STD' : {
        name: 'Standard',
        colors: {
            1: {value: 'red',         rgb:'red',     text_color: 'white', name: 'Rouge'},
            2: {value: 'green',       rgb:'green',   text_color: 'white', name: 'Vert'},
            3: {value: 'blue',        rgb:'blue',    text_color: 'white', name: 'Bleu'},
        }
    },
    'site1' : {
        name: 'Mon super site 1',
        colors: {
            1: {value: 'site1_color_1', rgb:'#193A5F', text_color: 'white', name: 'regular-blue'},
            2: {value: 'site1_color_2', rgb:'#76B72A', text_color: 'white', name: 'green'},
            3: {value: 'site1_color_3', rgb:'#2E4969', text_color: 'white', name: 'fade-blue'},
            4: {value: 'site1_color_4', rgb:'#0080C8', text_color: 'white', name: 'secondary-blue'},
            5: {value: 'site1_color_5', rgb:'#7a7a7a', text_color: 'white', name: 'gray'},
            6: {value: 'site1_color_6', rgb:'#c79900', text_color: 'white', name: 'gold'},
        }
    },
    'site2' : {
        name: 'Mon autre site tout aussi super',
        colors: {
            1: {value: 'site2_color_1', rgb:'#004884', text_color: 'white', name: 'regular-blue'},
            2: {value: 'site2_color_2', rgb:'#0F1E46', text_color: 'white', name: 'dark-blue'},
            3: {value: 'site2_color_3', rgb:'#D8ECFF', text_color: 'black', name: 'light-blue'},
            4: {value: 'site2_color_4', rgb:'#E1E7EE', text_color: 'black', name: 'gray'},
            5: {value: 'site2_color_5', rgb:'#56FEF2', text_color: 'black', name: 'turquoise'},
            6: {value: 'site2_color_6', rgb:'#0070cc', text_color: 'white', name: 'secondary-blue'},
        }
    },
};

$('body').on('click', ".attribute__input.form-control[data-attr-name='color']", function(){
    let $select = $(this);
    $('.edb_press_pro_3_color_picker').remove();
    let $table = $('<table class="color_picker">');
    $.each(colors, function(site_code, site_data) {
        let $tr = $('<tr>');
        $tr.append ($('<th>').text(site_data.name));
        $.each(site_data.colors, function(color_index, color_data) {
            let $a = $('<a>').attr('href', color_data.rgb).text(color_data.name).css('color', color_data.text_color).data(color_data).data('field', $select);
            $tr.append($('<td>').css('background-color', color_data.rgb).css('color', color_data.text_color).append($a));
        });
        $table.append($tr);
    });
    $table.insertBefore($select);
}).on('click', '.color_picker a', function(event) {
    event.preventDefault();
    let $a = $(this);
    let $field = $a.data('field');
    $field.val($a.data('value'));
    $field.find('option[value="'+$a.data('value')+'"]').prop('selected', true);
    $field.change(); // Trigger
});

Tada !

image

I’m quite happy with the result.
(A little bit of layout is missing but it’s secondary…)

Some small problems:

  • For the moment the administrator must click on the select field to display the color table.

  • And above all I am obliged to maintain my colors in three places!

    • In the custom_tag configuration.
    • In my color picker in js.
    • In my scss style sheets for the forehead.
  • Finally, When the administrator clicks on a color I do:

      $field.find('option[value="'+$a.data('value')+']').prop('selected', true);
      $field.change(); // Trigger
    

    It changes the value in the select field well… But that’s not enough to make the program understand that I changed the value and it doesn’t record it…

There you go,

How can we do better?


#10

I followed the @Serhey’s tutorial.
https://ezplatform.com/blog/extending-ez-platform-online-editor
But the example of the random number is not enough to get to the color picker I’m trying to make.
On the other hand I can’t trigger the system to understand that the value has changed with my color picker on the custom_tag.