Use CSS-Classes to align content in TinyMCE
MrTango opened this issue · 2 comments
MrTango commented
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"
}
MrTango commented
agitator commented
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