I see the default setup for TinyMCE left,right,center has been changed to use classes instead of embedding css direct into the html. Seems like a good idea in the quest to seperate design from content.
I think however the css is incomplete and probably not ideal for most setups.
In mce_init.js.inc there are the 3 line to specify the formats:
alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'justifyleft'},
alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'justifyright'},
alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'justifyfull'}
Then in content.css are the styles associated with these:
img.justifyleft {float:left; margin-right:10px;margin-bottom:5px;}
img.justifyright {float:right; margin-left:10px;margin-bottom:5px;}
Firstly there is no .justifyfull css class definded so this will not display correctly. Also these styles mean paragraphs are aligned left and right using floats which gives very odd results. To replicate the old TinyMCE setup these should use text-align and only images aligned using floats? There is also no aligncenter defined in the formats or css at all.
My suggestion is something along the following lines:
For mce_init.js.inc add an aligncenter:
formats : {
alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'justifyleft'},
alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'justifyright'},
alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'justifyfull'},
aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'justifycenter'}
},
Then for content.css add in the aligncenter css and only use float for images and tables. Also add !important to override any hardcoded styles from earlier TinyMCE config:
.justifyleft {text-align:left !important; }
.justifyright {text-align:right !important; }
.justifycenter {text-align: center !important; }
.justifyfull {text-align:justify !important; }
img.justifyleft, table.justifyleft {float:left; margin-right:10px;margin-bottom:5px;}
img.justifyright, table.justifyright {float:right; margin-left:10px;margin-bottom:5px;}
img.justifycenter, table.justifycenter { display: block; margin-left: auto; margin-right: auto;}
The use of classes for formats does also assume these formats are included in any front-end website css calls too which may not be obvious to some.
Has anyone else dealt with this in any other way?
☆ A M B ☆