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>
</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>
<!-- 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>
</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>
<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!
Source : http://woork.blogspot.com/2009/02/best-rich-text-editors-ready-to-use-in.html
