plone/mockup

Use CSS-Classes to align content in TinyMCE

MrTango opened this issue · 2 comments

Since the style tag should not be allowed in public multiuser sites, TinyMCE should not use it either.
We can define different formats for this, when we add this to the content-formatting field in TinyMCE control panel:

 "alignleft": {
    "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video,picture",
    "classes": "alignleft"
  },
  "aligncenter": {
    "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video,picture",
    "classes": "aligncenter"
  },
  "alignright": {
    "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video,picture",
    "classes": "alignright"
  },
  "alignjustify": {
    "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video,picture",
    "classes": "alignjustify"
  }

we than need to make sure that the theme uses these classes too:

.alignleft{
    text-align: left;
}
.aligncenter{
    text-align: center;

}
.alignright{
    text-align: right;
}
.alignjustify{
    text-align: justify;
}

or by using Bootstrap classes:
https://getbootstrap.com/docs/5.0/utilities/text/#text-alignment

 "alignleft": {
    "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video,picture",
    "classes": "text-start"
  },
  "aligncenter": {
    "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video,picture",
    "classes": "text-center"
  },
  "alignright": {
    "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video,picture",
    "classes": "text-end"
  },
  "alignjustify": {
    "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video,picture",
    "classes": "text-justify"
  }

Since we're using bootstrap for everything in classic, I don't see a reason to introduce extra or different styles...
Looking at https://getbootstrap.com/docs/5.1/utilities/text/#text-alignment it would be text-start, text-center, text-end to support rtl out of the box