Fix: Froala editor: useClassess to false

[kuzmany]

Q	A
Bug fix?	y
New feature?
Related user documentation PR URL
Related developer documentation PR URL
Issues addressed (#s or URLs)
BC breaks?
Deprecations?

Description:

Just set useClassess option to false.
For this option to work correctly, it is necessary to load the CSS files from the same domain the editor is running on.
https://www.froala.com/wysiwyg-editor/docs/options#useClasses

Another option is uncommented these lines

mautic/app/bundles/CoreBundle/Assets/css/libraries/libraries.less

Line 31 in d3aebf3

//@import "froala/froala_style";

mautic/app/bundles/CoreBundle/Assets/css/libraries/builder.less

Line 5 in d3aebf3

//@import "froala/froala_style";

I didn't know why it was commented. Should somebody from core team should know

Steps to reproduce the bug:

1. Create form and create description area
2. Paste image and try set align to right
3. Nothing happend

Steps to test this PR:

1. Apply PR and run app/console m:a:g
2. Create form and create description area
3. Paste image and try set align to right
4. Should work properly

List deprecations along with the new alternative:

List backwards compatibility breaks:

[alanhartless]

The froala CSS files are not loaded into the production versions of the landing page/emails and so they can't be used. This was done on purpose to prevent froala from interfering with the them with it's own CSS.

[GaberNeighbor]

This is a clean way to prevent froala from stripping inline css and applying classes a) are from a stylesheet we don't allow froala to generate b) are useless in email anyway

[escopecz]

This PR still hacks the Froala library. This option does not work?

[GaberNeighbor]

@escopecz Is this a new addition? If this is currently implemented then no, it doesn't work.

[kuzmany]

@GaberNeighbor please try update. Don't forget call php app/console mautic:assets:generate

[escopecz]

Woohoo, this looks much better!

[davevurby]

Works properly. Problem from #5620 is working as well.

[escopecz]

So this solution works for the use case @kuzmany outlined. It does not solve @GaberNeighbor's use case. It would if we'd put useClasses: false, into 4.builder.js on line 1330.

However, all of this was already there once, but it was removed because it did not work for another use case. I'm not quite sure what to do now.

[kuzmany]

@escopecz But this option was removed before Code Mode. I
n that time Mautic allow edit all templates and then Froala editor destroy layout.
Mautic 2.3 allow edit just part of template, then this option shouldn't destroy layout.

[Woeler]

Solved the issue for me.

[escopecz]

Alright then 👍

[kuzmany]

I noticed this PR generate a lot of inline styles.

• With useClasses:false generate inline style from CSS include to editor event (just select H1 title in editor)

• With useClasses:true generate class style to elements

This is real issue. I didn't find any option to disable it. But we should focus on it and include solution to 2.15 :(

@Woeler @escopecz

Test with forms and description area field. I tested with enable/disable useClasses

[escopecz]

@kuzmany what's the problem? Is it just longer HTML?

[kuzmany]

@escopecz Yes, it's bad. Style form by theme has to be with !important suffix. Inline style has priority, then we have to rewrite with important flag (color, font-size). And that not cool.
Maybe we should remove linked css file from editor, but I didn't have time to test it.

[escopecz]

So the emails/pages now looks differently? Are you able to send before and after screenshot? I mean it should look the same as in the builder, right?