5 Powerful WYSIWYG editors for web-based applications

Friday, October 9, 2009

5 Powerful WYSIWYG editors for web-based applications

Posted on 5:48 AM by -

In this post I suggest you to try five free WYSIWYG editors for your web-based applications that transform simple </code></em> HTML elements into powerful and useful rich text editors. This collection include:</p> <p>- Yahoo! UI Rich Text Editor<br> - TinyMCE<br> - NicEdit<br> - CKEditor<br> - openWYSIWYG</p> <p>I also provide simple instructions to implement quickly these editors in your web pages.</p><p> </p><p> </p><h2>Yahoo! UI Rich Text Editor</h2> <p><img src="http://woorkup.com/wp-content/uploads/2009/10/yahoo.jpg" height="193" width="658"></p> <p><a href="http://developer.yahoo.com/yui/examples/editor/">The Yahoo! Rich Text Editor</a> 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:</p> <div class="codex"><code><textarea id="editor" name="editor"></code></div> <p>Then, to activate the editor copy and paste the JavaScript code you find in the related pages on <a href="http://developer.yahoo.com/yui/examples/editor/">Yahoo Developer Network</a>.</p> <h2> TinyMCE</h2> <p><img src="http://woorkup.com/wp-content/uploads/2009/10/tinymce1.jpg" height="200" width="658"></p> <p><a href="http://tinymce.moxiecode.com/index.php" ref="nofollow">TinyMCE</a> is a platform independent web based Javascript HTML WYSIWYG editor control that has the ability to convert HTML <code><textarea></code> 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 <code><head></code> of your page:</p> <div class="codex"><code><script type="text/javascript" src="tiny_mce/tiny_mce.js"></script></code></div> <p>To initialize the editor use the code you can find <a href="http://tinymce.moxiecode.com/examples/full.php">here</a> (View Source link). Than add a simple text area in your page like this:</p> <div class="codex"><code><textarea id="content" style="width:100%">
Direct Link: http://tinymce.moxiecode.com

NicEdit

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:

Direct Link: http://www.openwebware.com

Internet Dumper

Friday, October 9, 2009