Tinymce: unable to set an alignment style

Hi,
on a 5.1rc1 Plone site i'm trying to change the alignment style of some text, for example right or justify (or whatever).

Tiny doesn't add a css class to the tag, but add an inline style.
Obviously, saving the page, this style will be removed by the output filters and the alignment is lost.

One quick and dirty solution is to enable "style" attribute in html filters in the control panel, but i don't know if it's a good idea..i don't trust my users.

I've seen that this is a TinyMCE feature (not a mockup feature), so i don't know if we can fix somehow in our mockup porting. Any ideas?

I'm not 100% sure I understand your problem, because there is a very easy way to replace a tinymce inline attribute by a class in the Plone tinymce control panel, default tab, formats section:

{
    "alignleft": {
        "classes": "mceplone-alignleft",
        "block": "div"
    },
    "aligncenter": {
        "classes": "mceplone-aligncenter",
        "block": "div"
    },
    "alignright": {
        "classes": "mceplone-alignright",
        "block": "div"
    },
(...default plone formats...)
}

What I have found not so easy is how to add these classes to Plone TTW; but that may be not a problem for you depending on what you do.

@gp54321 thanks! I haven't tried it yet, and it works..but as you said i haven't found any plone/tinymce class that sets a text-align.

We could use bootstrap's classes (text-right, text-left) but seems that they are not included in barceloneta.

Going deeper in this feature, i've found that from 5.0 to 5.1 the html filters control panel has changed, and exactly this commit introduced the "problem":
in Plone 5.0 there was a "style_whitelist" field with a set of allowed styles (also text-align), but in the new control panel we have less fields and we can only enable the whole "styles" attribute.

@MrTango, i (git) blame you for this :wink:
Obviously i don't know all the background about this decision, but is it some kind of regression or i'm missing some other configuration somewhere?

I see two possible solutions:

  • add the config in tiny control panel + some css classes in the theme (if there isn't already)
  • revert attributes filter and controlpanel entry

What do you think?

About the code change, nothing. I'm trying to understand other things now, too much load is bad for the state of my mind.
About the classes, I have tested with the SunRain theme from Quintagroup since I had mostly woe with Barceloneta. I changed (well... patched horribly) the sunrain-compiled.css file to add at the end:

.mceplone-alignleft {
  text-align: left
}
.mceplone-aligncenter {
  text-align: center
}
.mceplone-alignright {
  text-align: right
}

and it all seemed to work for me. I don't remember if I had to restart Plone or just refresh browser cache. Often you have to give a few quicks to these systems to get them to be nice.

There should be no reason that this could not work with Barceloneta, except that this theme seems designed to be difficult to change. If you noticed somewhere on the Internet there is advice to inherit a theme from Barceloneta:

very interesting and telling about the impossibility to actually do what is supposed possible with Plone, copy a theme TTW and modify it. Except that even inheritance did not quite work for me. In disgust (I don't have much patience I'm afraid) I added the Quintagroup theme. Unfortunately it is less beautiful than Barceloneta. But it is much more reliable, you can modify it and the TTW modified theme do actually work. So if you want to do a quick test use a reliable theme like SunRain, and if it works for you then get back to Barceloneta if you want.