The great part is that TinyMCE is specifically designed as an XHTML markup editor, so the output of it can go straight into any web container without further down-the-line manipulation. Even better was a feature I was not at all expecting – you can style the text editor with a .css file and a css class definition too! This means that if you use your site’s stylesheet and it’s written well, you can get the TinyMCE editor window to effectively replicate what your site post will look like. Now, that’s a powerful feature!
Here’s an example of what I mean. This is a sample post from my other site, blaqdesign.com, in the content editor system that I’m writing for it. The great part was that these posts weren’t originally created in TinyMCE, but since they’re valid XHTML fragments, I was able to load them into TinyMCE with no hassles whatsoever. If you go to the site, you’ll see in this very post in the site news, and formatted exactly the same way. The background is the same, the text formatting and colors are perfect, and the XHTML markup is preserved. Now, I don’t have to worry that other people will make a mess of the site formatting when they’re creating content.
If you’re interested, here’s my TinyMCE configuration I used:
mode : “textareas”,
theme : “advanced”,
theme_advanced_buttons1 :“bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,” + “|,bulletlist,numlist,|,undo,redo,|,formatselect,|,cut,copy,paste,pastetext,pasteword,|,” + “outdent,indent,|,link,unlink,image,cleanup,code,charmap”,
theme_advanced_buttons2 : “”,
theme_advanced_buttons3 : “”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
content_css : “/Styles/blaqStyleSheet.css”,
body_class : “contentBody”