OK, I figured this one out because it really annoyed me. Here's what you do:
You can configure what those buttons do with an extra configure (this is in the advanced tab of TinyMCE configuration in the admin)
This is the configuration I use:
Code: Select all
formats : {
alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'centertext'},
alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'justify'},
bold : {inline : 'strong'},
italic : {inline : 'em'},
strikethrough : {inline : 'del'}
}
You can read the TinyMCE docs, theyre really good, but basically what this does is this: when you hit the "alignleft" button, it looks to see if the element selected is on in the list ('p,h1,' etc.), then it assigns a class to that element.
Important: those classes "left', 'centertext' etc. are my classes that I defined in my CSS. So those alignment buttons won't work until you have the classes properly defined like: .centertext{ text-align:center; }
In the case of bold and em, it uses 'inline' which means it applies an inline tag to the selected text.
You can do a lot more, but this will get you started.