DevOps Zone is brought to you in partnership with:

I was born in 1981 in one little city. Since I was 10y/o I programmed in different languages. My first languages were basic, then C++/MFC, after .Net (C#, VB.Net, J#, ASP.Net), XSL+XML processing). In the last 5 years I worked with web languages (HTML, CSS, PHP, SQL, XML, XSL, JavaScript). After university I worked in several different companies, eventually becoming a blogger. This is my hobby too. Andrey is a DZone MVB and is not an employee of DZone and has posted 110 posts at DZone. You can read more from them at their website. View Full User Profile

WYSIWYG and WYSIWYM Editors

04.09.2013
| 3573 views |
  • submit to reddit

WYSIWYG and WYSIWYM Editors

Looking to use a rich text editor in your app? I researched existing editors and picked the best of available solutions. The term ‘WYSIWYG’ means “What You See Is What You Get”. As usual, this is a system (editor) in which content (tables, text, images etc) displayed on screen during editing appears in a form corresponding to its appearance when printed or displayed as a finished result (as example – a web document, a printed copy, or even a presentation).


1. YUI 3

The Rich Text Editor is a UI control that replaces a standard HTML textarea; 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. The Rich Text Editor’s toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.
YUI 3

2. TinyMCE

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. TinyMCE 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.
TinyMCE

3. WYMeditor

WYMeditor is a web-based WYSIWYM (What You See Is What You Mean) XHTML editor (not WYSIWYG).
WYMeditor

4. 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.
NicEdit

5. Redactor

Redactor is the most fantastic yet beautiful and easy-to-use WYSIWYG editor on jQuery. It is lightning fast, small, scalable, and powerful.
Redactor

6. CKEditor

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It’s a WYSIWYG editor that brings common word processor features directly to your web pages.
CKEditor

7. Aloha Editor

Aloha Editor is a semantic Rich Text Editor framework written in Javascript with best support of xHTML5. You can integrate it in a CMS, blog, wiki software or any other project where you need to edit content with a web based tool. Use it like a supersonic textarea. You can edit almost any DOM element with this supersonic textarea, but you need to care about configuration and storage.
Aloha Editor

8. markItUp

markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.
markItUp

9. TinyEditor

TinyEditor is a simple JavaScript WYSIWYG editor that is both lightweight (under 9KB) and standalone. It can easily be customized to integrate with any website through CSS and the multitude of parameters. It handles most of the basic formatting needs and has some functionality built in to help keep the rendered markup as clean as possible.
TinyEditor

10. SimpleHtml5Editor

SimpleHtml5Editor is just as it sounds, a simple html5 wisywig editor. It comes as a jquery-and-compatible plugin, in fact, it’s been built for zeptojs, but should work great on any jquery-compatible libraries.
SimpleHtml5Editor

11. elRTE

elRTE is an open-source WYSIWYG HTML-editor written in JavaScript using jQuery UI. It features rich text editing, options for changing its appearance, style and many more.
elRTE

12. bootstrap-wysiwyg

This tiny (5KB) JQuery Bootstrap plugin turns any DIV into a WYSIWYG rich-content editor, inspired by CLEditor and bootstrap-wysihtml5.
bootstrap-wysiwyg

Published at DZone with permission of Andrey Prikaznov, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)