TinyMCE can't align header tags

Question

Does anyone know how I can enable text alignment of header tags through the TinyMCE interface? If I select the text (of any header tag) and select an aligment option it appears to have lined up correctly in the editor. However, when I save the page it gets shifted back to the default alignment (in my case left).

I have also tried editing the HTML directly but when I close the dialog the HTML doesn't seem to update.

I found some documentation on the wiki about the extended_valid_elements which I tried to update in the tiny_mce.js file but it didn't seem to make a difference.

Here is the `valid_elements' setting for the header tags from the tinyMceConfig.config file:

-h1[id|dir|class|align],-h2[id|dir|class|align], -h3[id|dir|class|align],-h4[id|dir|class|align],-h5[id|dir|class|align],-h6[id|style|dir|class|align]

Answer 1

What about valid_elements? I think this should be the right setting for you, because header tags are valid xhtml tags, you do not need extended_valid_elements.

Answer 2

Just for anyone who has a similar issue, I managed to resolve this.

The editor attempts to apply the style attribute to header tags when you select any of the alignment options, by default this is not enabled in the valid_elements configuration.

In order to get this to work you just need to add the style attribute to the configuration for each header e.g. -h1[id|dir|class|align|style], -h2[id|dir|class|align|style] etc

If using Umbraco you need to make these changes in the ~/config/tinyMceConfig.config file and then recycle the app pool your site is running under.