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.
I had been using this TinyMCE which is very easy to integrate and customize. I do agree with you, this is indeed better WYSIWYG editor than FCKeditor. TinyMCE is also supported by more browsers than FCKeditor. Also in case of FCKeditor when you get some error you would not get any textarea or something like that but in case of TinyMCE even if you get some error in TinyMCE (which is rare) you will atleast have your textarea.
Another thing that is fascinating about TinyMCE is TinyMCE Compressor which is a backend for reducing the overall download and initialization time for TinyMCE. This method makes the overall download 75% smaller and the number of requests will also be reduced. Therefore, the overall initialization time for TinyMCE will be reduced dramatically if you use this script for loading TinyMCE. For detail you could refer to link: http://wiki.moxiecode.com/index.php/TinyMCE:Compressor
This tutorial is very much useful to me…. thank you Subesh….
site ramro cha.:D mast boleto Jhakas . I hope you will be helping lots of seeker who are seeking out for a help like me
Are you human? question is correct but if I type “yes” then “Error: You have entered the wrong sum in the spam protection field. Press the back button and try again. ” is seen.
When will you correct this error?
@sanjeeb,
.. and I will not change that!
This is just another way to say.. R you not a bot or program? An alternative for captcha ..
you have set the
height:”300px”
but i want to make the tiny mce in sucha a way that the height
goes the according to the text that it occupy..
Well i want file and image upload manager for TINYMCE for free. any hints ?