Best jQuery Wysiwyg Editor Plugins & Tutorials with Demo

MediumEditor : WYSIWYG editor with JavaScript

MediumEditor : WYSIWYG editor with JavaScript

This is a clone of medium.com inline editor toolbar.Since I always had problems with bloated editors and I loved the simplicity of medium.com solution I’ve tried to implement their WYSIWYG approach with this script.

MediumEditor has been written using vanilla JavaScript, no additional frameworks required.

Summernote : Super Simple jQuery WYSIWYG Editor on Bootstrap

Summernote : Super Simple jQuery WYSIWYG Editor on Bootstrap

Summernote is a javascript program that helps you to create WYSIWYG Editor on web.Simple UI, Interative WYSIWYG editing, easy integrate Backend server and so much others.Summernote uses opensouce libraries(jQuery, bootstrap, fontAwesome).

jHtmlArea : WYSIWYG HTML Editor for jQuery

jHtmlArea : WYSIWYG HTML Editor for jQuery

A simple, light weight, extensible WYSIWYG HTML Editor built on top of jQuery. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea DOM Elements on the page.

jQuery Text Editor

jQuery Text Editor

jQuery TE is a jQueryplugin. It is a lightweight (15.9 KB) and very useful HTML editor. And it works with WYSIWYG model.Most importantly, it can be integrated into your system in 1 minute. And you can modify it as you want in terms of interface. Even you can change the css classes.

jQuery TEworks with same performance on the most preferred browsers.And its source of the output is same as 90% on these browsers.

bootstrap-wysiwyg : jQuery Bootstrap WYSIWYG rich-content editor

bootstrap-wysiwyg : jQuery Bootstrap WYSIWYG rich-content editor

Tiny bootstrap-compatible WISWYG rich text editor, based on browser execCommand, built originally for MindMup. Here are the key features:

  • Automatically binds standard hotkeys for common operations on Mac and Windows
  • Drag and drop files to insert images, support image upload (also taking photos on mobile devices)
  • Allows a custom built toolbar, no magic markup generators, enabling the web site to use all the goodness of Bootstrap, Font Awesome and so on…
  • Does not force any styling – it’s all up to you
  • Uses standard browser features, no magic non-standard code, toolbar and keyboard configurable to execute any supported browser command
  • Does not create a separate frame, backup text areas etc – instead keeps it simple and runs everything inline in a DIV
  • (Optionally) cleans up trailing whitespace and empty divs and spans
  • Requires a modern browser (tested in Chrome 26, Firefox 19, Safari 6)
  • Supports mobile devices (tested on IOS 6 Ipad/Iphone and Android 4.1.1 Chrome)

fresherEditor : jQuery Rich html text editor

fresherEditor : jQuery Rich html text editor

fresherEditor is a light-weight WYSIWYG rich text editor plugin that uses contentEditable support in modern browsers for in-place HTML editing.

Features:

  1. Supports all text editing features such as bold, italic, font size and font name settings, text alignments, links and picture insertion, and more
  2. Builds toolbar automatically. By default, all buttons are built. You can configure which buttons to hide
  3. Triggers ‘change’ event so you can perform action when html content changes
  4. Uses Twitter Bootstrap

Bootstrap-wysihtml5 : jQuery & Html5 Beautiful wysiwyg Editors

Bootstrap-wysihtml5 : jQuery & Html5 Beautiful wysiwyg Editors

Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.

CLEditor : WYSIWYG HTML editor in jQuery

CLEditor : WYSIWYG HTML editor in jQuery

CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.

In addition to the standard text formatting features found in other WYSIWYG editors, CLEditor also contains rich drop downs for font name, size, style, text color and highlight color. CLEditor allows you to insert images, hyperlinks and horizontal rules.

CLEditor provides a rich plugin development environment, allowing you to customize its user interface and functionality to fit your needs.

Aloha Editor : HTML5 WYSIWYG Editor with jQuery

Aloha Editor : HTML5 WYSIWYG Editor with jQuery

The world’s most advanced browser HTML5 based WYSIWYG editor lets you experience a whole new way of editing. It’s faster than existing technologies and offers unprecedented WYSIWYG functionalities.

Redactor : Fantastic WYSIWYG-editor on jQuery

Redactor : Fantastic WYSIWYG-editor on jQuery

You must have noticed – a stylish editor. He looks equally well in any interface on any website. Are we wanting more, if the editor is already falling in love with his chosen interface?Inside you will find a clear, logical code. A good API. Customization available. All the tools to customize the editor for their needs. Be careful, your imagination can go a long way.

Drag a file from your computer out the window and insert a file, it immediately appears as a link directly to the text.Just drag the window and your image will already be in the editor.Clicking on any image editor, you can easily configure whether text wrap around the picture on the right or left.