10 Best jQuery and HTML5 WYSIWYG Plugins

HTML5 WYSIWYG (What You See Is What You Get) editors are always high in demand. But there are now so many of them around that it’s hard to find the best ones. In this post, I’m going to present some of the best jQuery and HTML5 WYSIWYG plugins, saving you time finding the plugin that fits your needs.

Froala

Froala

Froala WYSIWYG HTML Editor is easy to integrate and to use. It requires minimal coding knowledge. It requires jQuery 1.11.0 or higher and the iconic font named Font Awesome 4.4.0 . In combination with all the UI and UX features it has, it also comes with a strong defence mechanism against XSS attacks.

Highlights

  • 34 KB gzipped
  • Inline editing
  • Keyboard shortcuts are available
  • Requires basic HTML and JavaScript knowledge
  • Dark and light theme (can be customised by editing LESS file)
  • Optimised for mobile
  • MS-Word friendly
  • 34 languages are supported including RTL(Right To Left) support

ContentTools

--ADVERTISEMENT--

ContentTools

ContentTools is a small and beautiful content editor. The library doesn’t use any JavaScript framework or library (not even jQuery) but plays nicely with any of them. The ContentTools package is made up of 5 libraries, each of which can be used independently. It’s designed to be easy to extend.

Highlights

  • 49 KB gzipped
  • Inline editing
  • Resizing images and videos
  • supports undo/redo

Aloha

Aloha

Aloha Editor is a functional content editing library. It allows you to create editing experiences embedded seamlessly in your web application. The major con is that it still doesn’t support image insertion.

Highlights

  • 142KB size
  • MS-Word friendly
  • Cross browser compatibility
  • Customisable

TinyMCE

TinyMCE

TinyMCE is a platform independent web-based JavaScript HTML WYSIWYG. It enables you to convert HTML textarea fields or other HTML elements to editor instances. You can upload and manage files on Microsoft Azure, Google Drive, Amazon S3, DropBox and more. It follows the WAI-ARIA specification, making it compatible with screen readers such as JAWS and NVDA. There is also an enterprise solution in which you get prioritized support.

Highlights

  • Live media embedding
  • Built-in image editing
  • Spell check (enterprise)
  • MS-Word friendly
  • 40+ languages support
  • Robust Cross-Browser Performance

bootstrap3-wysiwyg

Bootstrap

bootstrap3-wysiwyg is a JavaScript plugin that makes it easy to create simple, beautiful WYSIWYG editors with the help ofwysihtml5 and Twitter Bootstrap.

Highlights

  • 206 KB minified
  • RequireJS support
  • Custom template for toolbar
  • Custom themes are available
  • Exposes events like load and blur

Summernote

Summernote

Summernote is a text editor based on Bootstrap. There are various themes available for it and they are powered by Bootswatch. There is also a version converted to Material theme named MaterialNote

Highlights

  • 80 KB JS+CSS
  • Supports Bootstrap 3.x.x
  • Can be easily integrated with Django, Rails or Angular
  • Easily customisable
  • CodeMirror integration

CKEditor

CKEditor

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

Highlights

  • Customised build using CKBuilder
  • MS Word friendly
  • Inline editing
  • Undo/redo support
  • RTL support
  • Supports around 60 languages

Trumbowyg

Trumbowyg

Trumbowyg is the lightest of all the editors listed here. While all existing WYSIWYG editors are larger than 45kB, Trumbowyg is only 16 KB . It depends on jQuery >= 1.7.

Highlights

  • Only 16 KB
  • 30+ Localisations

Redactor

Redactor

Redactor is a fast, powerful and extendible editor with a quality support team. It has been around for the last 7 years and is under active development. It also automatically uploads the images to Amazon S3.

Highlights

  • 75 KB minified
  • Inline text editing
  • CodeMirror support
  • Drag and drop functionality for images
  • Since the editor is plugin-based, it can be easily extended.

Conclusion

In this article I’ve shown you what I think are some of the very best jQuery and HTML5 WYSIWYG plugins. I hope this this list will help you in choosing a good text editor for your project and save some time finding the plugin that best fits your needs.