Subesh Pokhrel

Magento Developers Blog

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. [sourcecode=”javascript”] [/sourcecode] 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.