TinyMCE: adding text-align

[digitex]

I've encouraged the owners of a site to go in and start adding/editing text to get the hang of it and they immediately began trying to justify text to the right. That's not an option in the pw tinymce module (by default) so they inserted a series of spaces to force text to the right. Not good. Especially in a responsive layout.

Given the choice of a bunch of spaces or an inline style I'd prefer inline style (lesser of two evils) but for the life of me I can't get tinymce to work. I have the text-align buttons showing up in the tool bar and added "style|text-align|" to the valid elements but it's not retaining it.

I also set inline_styles to true in the inputfieldtinyMCEConfigDefaults in the js file.

What am I missing/doing wrong?

[Joss]

OOh

Not sure.

I have them working using the right click context menu (less mess on the tool bar)

Here is my standard set up:

theme_advanced_buttons1
formatselect,styleselect,|,bold,italic,|,bullist,numlist,|,link,unlink,|,image,|,code,|,fullscreen,spellchecker

theme_advanced_blockformats
p,h1,h2,h3,h4,blockquote,pre,code

plugins
inlinepopups,safari,table,media,paste,fullscreen,preelementfix,contextmenu

valid_elements
@[id|class|style],a[href|target|name],strong/b,em/i,br,img[src|id|class|width|height|alt],ul,ol,li,p[class],h1,h2,h3,h4,blockquote,-p,-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],#th[colspan|rowspan|width|height|align|valign|scope],pre,code

Additional TinyMCE Settings
paste_text_sticky: true
paste_text_sticky_default:true

(Those two settings remove all formatting when you paste)

Third Party Plugins
spellchecker : /site/tinymce/myplugins/spellchecker

(I have installed the spell checker in the above path)
 

Hopefully that should help!

 

 

Joss

[digitex]

Thanks Joss,

I wish I could say you helped but I'm still stumped. I added the contextmenu to the plugins but in Firefox it doesn't work. On a whim I tested it in Safari and the contextual menu works in Safari but it still doesn't insert the style to align right. The text jumps over to the right in the textarea, though no mark up to make it do that in the front end is inserted into the html and upon saving, it doesn't stick.

I wish I knew javascript. If I could get it to insert a class (which does work) instead of an inline style I could just add a couple of classes to the css and it'd be done.

[Soma]

You just have to add to the controls

,justifyleft,justifycenter,justifyright,justifyfull

And to the valid elements add the "style" since it uses <p style="text-align:right"> .. or the style will get stripped out

@[id|class|rel|style]... 

[digitex]

Thanks for the response Soma but as I said in my OP, I have added the controls and they show up in the toolbar and I added all the required elements to the allowed elements. I can click the buttons and it goes through the motions of aligning the text but when you look at the html there's no inline style inserted. It isn't even a matter of the style being stripped out on save, it doesn't get inserted in the first place.

I've added these functions on other installs and it's worked in the past so I know how to do it but in this case it's not working.

Edit: problem solved. I went around it with the class element. Long story short since class was being inserted properly and retained on save I just created an align right class and the site editor is able to add it in. It's a very isolated instance and won't come up often so it's not worth worrying about.

Thanks guys.

Edited April 4, 2013 by digitex

[Soma]

Adding the style to valid elements solves the problem to not get stripped of in tinymce. Works fine here and I use it all the time. When I remove the style from valid elements tinymce strips the inline style when viewing source thus also on save even though the text is aligned when clicking align button.