TinyMCE is a good content editing tool for web applications, but it can be made much better with just a few tweaks – an aftermarket upgrade if you will.
First off, the default themes are not that good looking right out of the box, so we use a nice theme created by The Big Reason – its a little bit easier on the eyes and not so Windows 95-ish.
Second, it makes sense to configure TinyMCE with the advanced buttons that you will require. You can do this in your javascript code where you initialize TinyMCE. Here’s an example of our initialize code for a project we recently completed:
tinyMCE.init({ mode : "none",
theme : "advanced",
skin : "thebigreason",
plugins : "paste,advhr,style,table,tinyBrowser,advlink,advimage",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_buttons1: "pasteword,charmap,advhr,separator,formatselect,separator,bold,italic,separator,fontsizeselect,link,unlink,separator,image,table,bullist,numlist,undo,redo,code",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location : "top",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
font_size_style_values : "10px,11px,12px,13px,14px,15px,16px",
convert_urls : false,
relative_urls : false,
content_css : "/css/tiny.css",
file_browser_callback : "tinyBrowser",
theme_advanced_toolbar_align : "left"});
You’ll notice above in the code that we created our own “content_css” file – this comes in handy because it allows you to style the text inside the TinyMCE window the same as it will be when it is live on the page. Also, we tweaked the font_size_values to be more usable for our needs: 10px,11px,12px,13px,14px,15px,16px. Finally, since TinyMCE is only meant as a content editor out of the box, we added the tinyBrowser capability, which allows us to upload image files into TinyMCE and edit them inside the content.
TinyMCE is a very powerful editor and we have just scratched the surface here, there are many things you can do to make it work better for your specific needs…