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:
- 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
The only lines of code you have to add are the following:
<!-- Include the Free Rich Text Editor Runtime -->
<!-- Include the Free Rich Text Editor Variables Page -->
<!-- Initialise the editor -->
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.
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:
...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:
That's all! It's ready to run on your page.
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:
var sBasePath = document.location.href.substring(0, document.location.href.lastIndexOf('_samples')) ;
var oFCKeditor = new FCKeditor( 'FCKeditor1' );
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 250;
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!