Configuring TinyMCE:Simple Setup

Everybody is already familiar with WYSIWYG editor. Before, doing CMS projects I used to use fckeditor, and I always had a problem with its bad design and loading time. Though you can config the editor to just the actions you need. I still felt something was not right about it. And I searched about editors, then I came across TinyMCE editor.

TinyMCE is platform independent, javascript based editor and has a very special feature of changing the textareas into the editor’s instance. It takes lesser time then fckeditor or other editors I have used. It also has a simple look and can fit into any designs. And its pretty easy to configure too. You can download it from http://tinymce.moxiecode.com/download.php. Here is code that may help you through configuring it for minimal use.

<script language="JavaScript" type="text/javascript" src="../tinymce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">
tinyMCE.init({
	theme : "advanced",
	mode: "exact",
	elements : "content",
	theme_advanced_toolbar_location : "top",
	theme_advanced_buttons1 : "bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,outdent,indent,separator,undo,redo",
	theme_advanced_buttons2 : "",
	theme_advanced_buttons3 : "",
	height:"350px",
	width:"600px"
});
</script>

Code #1 : Includes the tinymce files for the page.
Code #4-#14: Initiates the tinymce instance for the page.
Code#5-#6: TinyMCE has a lots of themes and mode which you can configure to exactly what you want. Let’s leave this for now. Just keep those two.
Code#7: Now here’s the tricky part. You should keep here the name/Id of the textarea on which tinyMCE is decorated. If you want many editor’s instance on the same page, just add other textarea element seperated with commas.
Code#8: Defines where the toolbar is placed. The other option is bottom.
Code#9: Defines the tools avaliable. You can put custom tools wherever you like, either on button1 or button2 or button3.
Code #12-#13: Defines the height and width of the editor.

This is just a simple set up for tinyMCE, I am looking forward to adding more on this. Catch me later.

Powered by Bookmarkify™