coderchris.com

They guys who produce TinyMCE suggest, when initialising the editor, that you set the content_css parameter to be the url to your site’s CSS, so that the content you type into the text area is styled in the same way as the rest of your site.

This is a great idea and works very well, but a lot of CSS layouts make use of various text positioning options which don’t really apply when translated to a wysiwyg editor, for example making the default alignment centred with no padding.

Thankfully you can get around all of this quite easily and add further custom styling to your editor’s textarea by adding the .mceContentBody style to the end of your site’s CSS file and specifying any further layout options in that.

For example the following css tells the editor in my app to always ensure the text alignment is left justified by default and give a 10 pixel padding to the textarea the editor’s being applied to so that the text that will be input by the user doesn’t squash up against any particular border of the text area itself:

.mceContentBody {
text-align: left;
padding: 10px;
}

Nice and simple really but not so easy to find quickly when searching on Google so I hope this helps someone else out there too!

Related posts on coderchris.com:

1. Make Money With Wordpress And Matched.co.uk
   Everybody out there at the moment is trying to make money from their blog in...
2. Convert Multiple Spaces To a Single Space
   Sometimes you want to sanitise a block of text or input by removing consecutive multiple...
3. Advanced Syntax-Hilighting Online Code Editors – A Wordpress IDE?
   When I write plugins for wordpress I like to do it on a test blog...
4. Changing The Default Search Engine in Firefox Back To Google or To Something Else
   When you type keywords into your Firefox address bar and hit enter it usually goes...
5. Wordpress 2.3 has been released
   Wordpress 2.3 has been released and I can already see the improvements as I'm writing...