This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Tuesday, February 10, 2009

Best Rich Text Editors ready to use in web projects

This post illustrates five interesting rich text editors ready to use in your web projects. I also provided some guidelines regarding how to implement them on your pages using a few lines of HTML code. Try them!

1. Yahoo! UI Library: Rich Text Editor
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" rows="15" cols="70">
</textarea>

...and copy and paste the Javascript code you can find in the related pages on Yahoo Developer Network on your page. Yahoo! provides a lot of useful and well explained examples regarding how to implement this rich text editor. I suggest to take a look at the following links:

- Simple Editor with basic buttons
- Code Editor
- Editor in a Dialog Control

The Rich Text Editor's toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. For example you can replace your Wordpress default editor with the Yahoo! Rich Text Editor using this plugin, integrate it into Drupal to edit content using this module or use it like editor for comments of your blog .


2. Free Rich Text Editor
Free Rich Text Editor is an extremely easy to use FREE javascript based HTML WYSIWYG editor for your website, it can easily be implemented into any existing content management system or other web application with no knowledge required in programming or javascript. Only 3 lines of code required to set up the editor. It also now outputs as XHTML compliant code!



The only lines of code you have to add are the following:

<form action="" method="post">
<!-- Include the Free Rich Text Editor Runtime -->
<script src="/freerte/js/richtext.js" type="text/javascript"></script>
<!-- Include the Free Rich Text Editor Variables Page -->
<script src="/freerte/js/config.js" type="text/javascript"></script>
<!-- Initialise the editor -->
</form>

Simple no? The result is very nice and looks like the Microsoft Word interface. I suggest you to try it if you are looking for an affordable and quick to implement solution for a rich text editor with a lot of useuful features. You can download it here.


3. TinyMCE
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.



Is very simple to integrate in your website only with a few lines of code. Add this code into the tag <head> of your page:

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

...and initialize the editor using the code you can find here, clicking on the tab View Source. Than add a simple text area in your page like this:

<textarea id="content" style="width:100%">
</textarea>

That's all! It's ready to run on your page.


4. FCKeditor
FCKeditor is a very nice HTML text editor brings to the web much of the power of desktop editors like MS Word. It's lightweight and doesn't require any kind of installation on the client computer. The interface is clean and



It's very simple to implement using this code:

<form action="" method="post">
<script type="text/javascript">
var sBasePath = document.location.href.substring(0, document.location.href.lastIndexOf('_samples')) ;
var oFCKeditor = new FCKeditor( 'FCKeditor1' );
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 250;
oFCKeditor.Create();
</script>
</form>



5. Xinha
Xinha is a powerful WYSIWYG HTML editor component that works in Mozilla based browsers as well as in MS Internet Explorer.



Its configurabilty and extensibility make it easy to build just the right editor for multiple purposes, from a restricted mini-editor for one database field to a full-fledged website editor. Its liberal, BSD licence makes it an ideal candidate for integration into any kind of project.

Do you have any suggestion about this topic? Add your comment or suggest a link, thanks!

blog comments powered by Disqus
Ace said...

I think you forgot about the little programmable beast called jWYSIWYG

siubie said...

hi antonio i have been using tiny mce but there is a little trouble when i copy paste from microsoft word ..

Osvaldo Santana Neto said...

Take a look at NicEdit.

Witti said...

Another nice editor is markItUp!.

Demóstenes García said...

I've been using markItUp! and it's a great alternative too.
http://markitup.jaysalvat.com/home/

Wayne said...

An interesting question is how exactly do you filter "copy/paste" content from Microsoft Word documents? Word adds many unwanted tags.

guyniche said...

I think the biggest challenge using rich text editors is how they handle copy and paste from the Microsoft product line. At our shop we've tried a number of rich text editors in our content management systems and they all do a pretty poor job doing a straight copy and paste.

Currently we use FCKEditor which is pretty FCK'ing good, but we have to train our web editors to use the paste as text or paste from word function which can be confusing. Our editors just want a simple way to go from word or outlook to the web. Unfortunately, we haven't found any product that does the job.

neondragon said...

Where is widgEditor? I think it should be on your list because it is lightweight and can handle pretty much.

Anonymous said...

Hi Antonio,

Please give us your recommendation or feature comparision, it would be helpful to choose for the people who have never used it.

lowell said...

37signals released theirs, wysihat, a few months ago. was their offering considered for your list?

http://github.com/37signals/wysihat/tree

BlueCherry said...

@guyniche The problem is not the WYSIWYG editors failing to handle Microsoft Office-originating content.

The editor just displays what you feed it. If you chose to paste messy code into it, wherever it originates from, you cannot (and should not) expect the editor to correct it for you.

There is no way for the editor to guess what you really meant to paste into it and it should therefor assume you know what you are doing.

The 'paste from MS Word'-solution is the best way to go, because it allows you to explicitly tell the editor: 'The following crappy markup was auto-magically generated by MS Word, please correct as many known markup-related bugs in MS Word as possible.'

In other situations, where you might intentionally insert crappy (or potentially crappy) markup you do not want the editor to automagically mess with it..

Janckos said...

Excelente recopilacion, gracias.

WorldmedTourism said...

You runs a high quality blog

Lee Smith said...

I still like the one from LivePipe...so simple.

http://livepipe.net/control/textarea

Mohamed Hamza said...

Hi
can i add this to my blogger blog ???

jesgo said...

Buena recopilación.
Thanks.
jesgo23

giochi gratis said...

Thanks for this post. Very helpfully!

enver said...

@Ace i'm looking for simple editor like jWYSIWYG. i like it.

¥oosu£ said...

tiny mice is really handy and easy to use than other Web WISWING Editors

quintessens said...

What about Dojo ?

used in Lotus Domino 8.5

http://ajaxian.com/archives/dojo-rich-wysiwyg-editor

Frédéric Hewitt said...

An important question is which rich text editor produces valid and semantic markup ? When text indent is created with blockquote, strong and emphasis with <b> and <i>, and color with <font> tag, rich text editor are just damageable for the web.

I know that TinyMCE make a really good job about producing valid/semantic markup, and customization allow to remove invalid elements (like strike or underline) if we don't want them.

Can't say about others editors.

Ellis Geeklab.net said...

I noticed there was no mention of file uploading, which FCK does.

Sheldon Lendrum said...

Try SPAW, PHP or ASP.Net version, great file manager.

http://www.spaweditor.com/

Joshua said...

Great, simple editor is WMD-Editor (http://wmd-editor.com/) I have used it on many projects and love it for the simplicity and ease of use for users that feel overwhelmed with some of the more feature rich editors.

Matt B. said...

On a Mac, copy and paste from Word just copies the plain text, which would probably a better way for it to work in Windows too. If you really wanted to paste HTML, then you could click the button to view the HTML source code. So that's how I think these editors ought to work -- assume plain text unless told otherwise.

Matt B. said...

I just discovered a plugin which seems to resolve the copying and pasting from Word issue for TinyMCE:

http://wiki.moxiecode.com/index.php/Paste2

Xaviounet said...

THANKS a lot !

I tried them and I used tinyMCE for http://www.blocnotesenligne.com and it works great :) thanks again ;)

Divergence said...

Thanks, exactly what I was looking for. Will need to evaluate as I've used Tiny and MCE before, but wanted to see what else was out there, thanks!

Satish Kumar said...

I checked with widgeditor, tats wat i have been lloking for, a simple one!!

can someone tell me how to use it on my webpage which is being developed by PHP!!

Many appreiations!!

Thanks!!

mu_dev said...

Very nice, thanks a lot.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News