5 Powerful WYSIWYG editors for web-based applications
- by Antonio Lupetti
- 33
- October 6, 2009
In this post I suggest you to try five free WYSIWYG editors for your web-based applications that transform simple textarea HTML elements into powerful and useful rich text editors. I also provide simple instructions to implement quickly these editors in your web pages.
The Yahoo! Rich Text Editor is a UI control that replaces a standard HTML textarea and is based on Yahoo! UI Library; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. Implement this editor in your web site is very simple. You have to add a simple textarea like this:
<textarea id="editor" name="editor">Then, to activate the editor copy and paste the JavaScript code you find in the related pages on Yahoo Developer Network.
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control that has the ability to convert HTML <textarea> fields or other HTML elements to editor instances. TinyMCE is lightweight, browser friendly, very easy to integrate into other Content Management Systems and fully customizable with themes and plugins. This editor can be integrated in your website only with a few lines of code. Add this code into the tag of your page:
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>To initialize the editor use the code you can find here (View Source link). Than add a simple text area in your page like this:
<textarea id="content" style="width:100%">NicEdit is a WYSIWYG editor for websites. Its goal is to be as simple and fast as possible for users of your application. NicEdit is extremely lightweight and can be easily integrated in any site with minimal impact while providing visitors an effective means to express themselves in rich text. To include NicEdit in your page you have only add the following two lines of code and all textareas on the page will be converted to nicEditors:
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">
bkLib.onDomLoaded(nicEditors.allTextAreas);
</script>CKEditor is a powerful WYSIWYG editor that brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice. Because CKEditor is licensed under flexible Open Source and commercial licenses, you’ll be able to integrate and use it inside any kind of application. This is the ideal editor for developers, created to provide easy and powerful solutions to their users.
openWYSIWYG is the ultimate WYSIWYG editor for your web-based applications and forms that’s packed with every rich-text editing feature you need to make your content management system that much better. Packed with every rich text editing feature you need, openWYSIWYG gives you total control over formatting your text. Setting up openWYSIWYG is so easy, you can quickly turn any <textarea> into a powerful WYSIWYG editor with just a few simple lines of code. The only thing you have to do is to include the following line of code in your web pages:
<script language="text/javascript">
WYSIWYG.attach('textarea-id');>
</script>
L’involuzione del Web: come Google e Facebook stanno cambiando la rete e le nostre abitudini
Terremoto Yahoo! Cadono le prime teste dopo lo scandalo delle dichiarazioni false sul CV del CEO Scott Thompson
- 3
- May 8, 2012
L’involuzione del Web: come Google e Facebook stanno cambiando la rete e le nostre abitudini
- 18
- April 15, 2012
Nice review but a little bit incomplete.
It’d be nice to know how each editor adheres to standards.
I’ve used CKEditor and it is very easy to be customizable. The CKFinder component is also a very good tool and can be integrated to CKEditor easily.
You’re website looks very good, it was a pleasure to be on you’re. Keep on the good work
to be frank, its a Good list
I use TinyMCE it good for me.
Hi Antonio,
Nice collection, right now Im testing some WYSWYG appz for my Codeigniter project.
BTW, I found another collection http://www.kickbill.com/?p=1092
Kind Regards,
I tried to integrate YUI Editor into an application that we have been building and found it to be a PITA. It does not have a built in Source code editor you have to write custom code to show and hide a textarea. Also if you want to inject text or html into the editor you have to know which mode you are in. I switched to ckeditor and have had no problems at all. Also ckeditor keeps a global singleton instance of editors on the page available so that you can get a reference to the editor which comes in handy when you want to save the content of the editor to an underlying textarea if you are submitting the form via ajax.
each editor has it’s advantages and dis-advantages
I like CKEditor (formerly FCKEditor) very much, as it can be configurated very good, when you read the documentations… ;=)
it has a lot of possibilities to extend functionality to integrate filemanagement like image-integration, video-integration etc. using plugins
others prefer TinyMCE, I don’t
what about XStandard?
I really like this post very nice i like Tinymce because it has very nice file manager plugin tinybrowser which is working really nice with my projects , earlier i was using FCKediter which was giving some trouble in projects.
I was a huge fan of NicEditor but it started giving crappy code recently so I switched back to (F)CK Editor.
I did not know that you can use Yahoo editor in your own web application. This is great.I have been using CKEditor for few years now. It is easy to configure and use. Very stable and cool features.
Dijit’s Rich Text editor, Dijit.Editor, is a text box on steroids. Designed to look and work like a word processor. The editor features a toolbar, HTML output, and a plugin architecture that supports new commands, new buttons and other new features.
openWYSIWYG does not support safari 3 -.-
Antonio – you have written the link text under TinyMCE as “Direct Link: http://ckeditor.com/demo”
It actually links to the correct page though :)
Thanks! Now it’s correct :)
from my experience i had the quickest integration with tinymce. nice, powerful and easy to use
jwysiwyg (http://code.google.com/p/jwysiwyg/) is so easy! ^^
This is reminding me for the time I have searched for a good editor.
Thanks.
thanks for this mate. :)
I been used nicedit and tinymce editor for most of my project but I feel interest with ckeditor.. It seems it’s very nice and neat to look at.. I will have a try for it.
Thanks mate!
I lover the Ck editor
We’ve been using TinyMce and FCKeditor for quite long time now.
I just wanted to add FCKEditor, but frankly, I did not know that they changed the name to CKEditor :)
I love option FORCE PASTE FROM WORD, because many editors don’t want to clean up copied text.
BTW Good luck with new domain ;)
It appears that TinyMCE is becoming more resource hog day by day. A full featured tinymce is resource intensive. So i’m back to FCKEditor (CKEditor now).
nice review. thanks.
imho, YUI is too heavy to use on small website NicEdit is lightweight and simple script. But i choose ckeditor because of the image editor is rocks.
Thanks :) nice editor
I have using CKEditor for my site. But It seems not really good in UTF-8 or Unicode.
ah! just what i need right now. CKEditor looks nice.
Thanks for this great collection. best regards.
Has anyone found a light weight, web based WYSIWYG editor that works on the iPhone, via mobile Safari?
I tried CKEditor but clicking the editor will not bring up the iPhone keyboard, you have to switch to “source” & know HTML to use it from the iPhone.
i have the same problem with Matt..Iphone safari doesn’t support tinymce,nicEdit or ckeditor..
How can we pop up the keyboard automatically when a user taps on the textarea?
i believe in ck editor i have problem when i try to highlight a table: for example, i have a table of 5 row and 3 column when i want to highlight the 3rd row of first and second column it doesn’t highlight as i wanted to. second problem i face when i copy from lotus to the editor it doesn’t come in the right format. it all mix up