30+ Best jQuery Wysiwyg Editor Plugins & Tutorials with Demo

Pell : Simplest and Smallest WYSIWYG Text Editor

Pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies.

• Pure JavaScript, no dependencies, written in ES6
• Easily customizable with the sass file (pell.scss) or overwrite the CSS

Read More Demo

TOAST UI Editor : GFM Markdown Wysiwyg Editor

TOAST UI Editor provides Markdown mode and WYSIWYG mode. Someone may like the productivity of Markdown, but the other can
be looking for a way to make it easier to edit. The TOAST UI Editor can be the coordinator of both. It offers Markdown
mode and WYSIWYG mode, those can be switched at any time during writing content. Work together conveniently in one document.

Read More
Demo

BrickyEditor : WYSIWYG Block Editor jQuery plugin

BrickyEditor is the simple WYSIWYG editor, based on block templates system. Usually, editors without any frontend background
makes a lot of mistakes in html code. On the other side — there is a lot of WYSIWYG editors, that brings them too much
freedom, which leads to different appearence of publications.

Read More
Demo

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.

Read More
Demo

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)

Read More
Demo

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

Read More
Demo

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.

Read More
Demo

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.

Read More
Demo

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.

Read More
Demo

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.

Read More
Demo

elRTE a open-source WYSIWYG HTML-editor

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. You can use it in any commercial or non-commercial projects.

Read More
Demo

tinyMce jQuery Bootstrap Plugin

Access to visual editors to create/edit the following Bootstrap elements like Buttons (+ icons),Icons,Tables,Templates (create
only),Breadcrumbs,Paginations,Pagers,Labels,Badges,Alerts,Panels.Use your own Bootstrap css, wich will be directly
rendered either in tinyMce editor and plugin visual editors.

• 11 plugins in 1
• Visual Editors
• Easy to install, no skill needed
• Awesome customer support

Read More
Demo

Wysiwyg.js : jQuery Wysiwyg Editor

‘wysiwyg.js’ is a (minified) 12k contenteditable-editor with no dependencies. There is also a (minified) 10k jQuery-plugin
‘$.wysiwyg()’ to create a full-featured editor.It does only:

• Transforms any HTML-element into contenteditable
• onselection-event: e.g. to open a toolbar
• onkeypress-event: e.g. to handle hotkeys
• onplaceholder-event: show/hide a placeholder
• .bold(), .forecolor(), .inserthtml(), … functions

Read More
Demo

Minimalist Online Markdown Editor

This is the source for the simplest and slickest online Markdown editor.Just write
Markdown and see what it looks like as you type. And convert it to HTML in one click.

Read More
Demo

Morrigan jQuery Editor

Morrigan Editor is jQuery WYSIWYG editor with predictable behavior, persistence and consistency.

Read More
Demo

jQuery insert plugin for MediumEditor

jQuery insert plugin for MediumEditor which is a clone of medium.com WYSIWYG editor. The plugin is next, completely rewritten
version of previous “images plugin”. Now inserting images is only one of the plugin’s addons.

Read More
Demo

jQuery Spellchecker Plugin

The jQuery Spellchecker is a free Javascript spellchecker in the form of a lightweight jQuery plugin that can be used to
check the spelling of text within a form field or within a DOM tree.

Features:

• Unicode support (works with most languages)
• HTML parsing (for using the spellchecker within WSYIWYG editors)
• Text parsing (for using the spellchecker on form fields)
• Multiple fields
• Multiple PHP back-end drivers (Enchant, PSpell, Google)
• Friendly API
• Event based

Read More
Demo

Froala : jQuery WYSIWYG Editor

A beautiful jQuery WYSIWYG editor built on the latest technologies and according to the latest industry trends.Simple and
yet the most complete WYSIWYG editor with lots of customization options. Style it your way for the best editing experience!
Features:

• Cross-browser
• Retina Ready
• Image Support
• Autosave
• High Performance

Read More
Demo

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.

Read More
Demo

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).

Read More
Demo

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.

Read More
Demo

MaterialNote : A Summernote Wysiwyg Editor

A Summernote wysiwyg editor version converted for Materialize.

Features:

• Following toolbar
• global restyling

Read More
Demo

WebODF : JavaScript Document Engine

WebODF is a JavaScript library that makes it easy to add Open Document Format (ODF) support to your website and to your mobile
or desktop application. It uses HTML and CSS to display ODF documents.

Read More
Demo

Easyeditor : jQuery rich text HTML / WYSIWYG Editor

EasyEditor is a richtext html wysiwyg edito and completely free and open source for educational and commercial purpose.

Read More
Demo

ContentTools : JS library for WYSIWYG Editors

ContentTools is a javascript library for building WYSIWYG editors for HTML content.

Read More
Demo

UMeditor : jQuery Rich Text Editor

UMeditor, referred to UM, is ueditor simplified
version. To meet our portal is simple reply box post boxes and demand for,
customized online rich text editor. Our goal is not only to improve the
online editor of editing experience, but also wants to change the threshold on the front-end technology rich text technology,
so that we no longer feel this is a pit.

1. Lightweight : the amount of code master file is 139k.
2. Load faster : to abandon the use of traditional iframe
   mode, using a div loaded way to achieve faster loading speed and zero load failure rate.
3. Customizable : CI complete, highly customized level.
4. Scalable : code hierarchy split clear, the function as
   a plug-articulated, flexible customization required.
5. More background support : support php, asp, jsp, net Fourth
   background deploy code
6. Feature-rich : support insert the equation, QQ screenshots
   paste, drag and drop upload pictures, insert the map, Drafts function

Read More
Demo

Cazary : jQuery plugin of WYSIWYG editor

jQuery plugin of WYSIWYG editor that aims for fast, lightweight, stylish, customizable, cross-browser, and multi-language.

Read More
Demo

Trumbowyg : jQuery plugin for WYSIWYG HTML editor

Simple HTML Editor field for the Silverstripe CMS that uses the Trumbowyg jquery plugin for WYSIWYG editing.Editor and generated
code are optimized for HTML5 support. Compatible with all recents browsers like IE8+, Chrome, Opera and Firefox.

Read More
Demo

Squire : HTML5 rich Text Editor

Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation, whilst being supremely lightweight
and flexible. It is built for the present and the future, and as such does not support truly ancient browsers. It should
work fine back to around Opera 12, Firefox 3.5, Safari 5, Chrome 9 and IE9.

Read More
Demo

Dante : Medium wysiwyg editor clone

So far I have tried all the Medium.com wysiwyg clones out there, these are really great, and each have their pros and cons.
But none of them has all the features that the real medium editor provides. so I wonder, How complicated could be write
my own Medium wysiwyg clone?

• HTML sanitizer for pasted or loaded text.
• Image upload for paste events.
• Image upload for legacy images on existent texts.
• The medium (+) Tooltip to embed or upload media.
• Tab navigation.

Read More
Demo

KCFinder : Web file manager with PHP & HTML5

KCFinder is free open-source replacement of CKFinder web file manager. It can be integrated into FCKeditor, CKEditor, and
TinyMCE WYSIWYG web editors (or your custom web applications) to upload and manage images, flash movies, and other
files that can be embedded into an editor’s generated HTML content.

Features:

• Ajax engine with JSON responses
• Multiple files upload
• Upload files using HTML5 drag and drop from local file manager
• Drag and drop images from external HTML pages. Multiple images can be dropped using selection (Firefox only)
• Download multiple files or a folder as single ZIP file
• Select multiple files with the Ctrl/Command key
• Clipboard for copying, moving and downloading multiple files
• Easy to integrate and configure in web applications

Read More
Demo

RichText : WYSIWYG editor developed as jQuery Plugin

RichText is a WYSIWYG editor developed as jQuery Plugin.

Read More
Demo

Quill : Powerful Rich Text Editor

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API you
can completely customize it to fulfill your needs.

Read More
Demo

Vue Html editor : jQuery Plugin

A Vue.js component implementing the HTML editor with the jQuery summernote plugin.

Read More
Demo

Jodit Editor : WYSIWYG and FileBrowser

Editor and FileBrowser — Jodit. Pure javascript. No libraries! Lightweight:~32kB gzipped.

Read More
Demo

EmojiOne Area : jQuery WYSIWYG editor with Emojione icons

EmojiOne Area is a small jQuery plugin that allows you to transform any html element into simple WYSIWYG editor with ability
to use Emojione icons.

Read More
Demo

jQuery Notebook : WYSIWYG Rich Text Editor

A simple, clean and elegant WYSIWYG rich text editor for web applications.

Read More
Demo

DocEditable : Clean WYSIWYG Editor in JavaScript

DocEditable is a clean WYSIWYG editor tool in your browser in JavaScript.

Read More
Demo