tinyMCE - The best WYSIWYG editor!
Searching for a WYSIWYG editor :
I've been searching the internet these past few days for the best free WYSIWYG editor...
For those who aren't familiar with the term - WYSIWYG is an abbreviation for What You See Is What You Get editor. It's those small word editors you see on sites like this one that allow you to use rich text and even view your text in html.
I've been using these editors for sites i've been building for quite a while, finding them very comfortable.
I used to use fckEditor in the past (which is a great editor), when I programmed mostly in PHP. But now I wanted something more comfortable for .net...
tinyMCE and it's benefits :
Now I found tinyMCE which I think is the best, at least for the .net fans among us.
- For starters, they have their own control you can add to your toolbox. You just download the dll, add it to your toolbox and drag it to your aspx design page!
- Of course they have all the regular options you can ask for in a regular editor - colors, links, images, formatting text, numbering, etc....
- Another thing I like is that it works great with "invisible" tables, meaning you can add a table and give it border=0 and still see the border while editing. This might sound trivial but i ran into an editor (even two) that couldn't do this.
- It has a bunch of plugins you can choose from like automatic spell checker, emoticons, find/replace dialog, and more...
- Compatible with all the main browsers (FireFox, IE, Opera...)
- The last benefit, which I'll explain in detail is:
Getting tinyMCE to work in an UpdatePanel :
My current project uses alot of UpdatePanels and partial updates. In some cases I need to load the WYSIWYG editor in a partial update. I thought this would be easy, and at first I tried with two other editors. I tried tweeking the code and getting it to work, but the closest i got was making one of them work in IE but not in FireFox.
I got tinyMCE to work with minor fixes :
First add the tinyMCE with all the properties you want to your aspx page. (not inside an UpdatePanel for now, recommended just some test temporary page)
For the editor to work in any case, you need to make sure you downloaded the js files, placed them in your project, and add some settings to your web.config. I just downloaded the .net sample from their site and copied the new settings.
Now, open the page in your browser, and view the pages html source.
You need to copy the javascript part that initializes the editor and place it into a string in your code-behind.
The highlighted text is what you need to copy to a string in your code...
Notice the last function call to ScriptManager.RegisterStartupScript which is how our javascript code is triggered when the UpdatePanel is updated.
I hope you can enjoy it as much as I do...
* This is not meant to be a commercial (by that I mean that im not getting sponsored in any way to publish this post :)