20 Awesome WYSIWYG and jQuery Text Editor Plugins

18 Feb , 2014  jQuery 

WYSIWYG-RTE-Plugins-InspirationThis article is to get the list of some of the most popular WYSIWYG and jQuery text editor plugins. It is a composition of 20 best jQuery text editor plugins for inspiration.

There are many text editor plugins found on the internet. But, finding the best and most suitable for your project can be difficult. It is confusing to know that there are many options for text editing. We have text editor plugins in the form of WYSIWYG plugins, jQuery plugins, DOJO, YUI, JavaScript and so on. Today, we want to share only the WYSIWYG(What You See is What You Get) and jQuery based text editor plugins.

We have divided this article into two: Rich Text Editor Plugins and Basic Text Editor Plugins. You find the plugin details followed by the editor name and image. The list is below:

Rich WYSIWYG and jQuery Text Editors Plugins:

1 CKEditor – WYSIWYG Plugin

PLUGIN PAGE | DEMO
PLUGIN PAGE | DEMO

About 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. Enhance your website experience with our community maintained editor.

  • Open Source
  • Community driven
  • Fully customizable
  • Enriches website experience
  • High standard of quality
  • Free!

2 jQuery TE – jQuery Plugin

PLUGIN PAGE | DEMO
PLUGIN PAGE | DEMO

About jQuery TE

jQuery TE is a jQuery Plugin.

  • Lightweight (Just 19.5Kb)
  • Works with WYSIWYG model
  • Provided free to use under MIT license.
  • Works on most of the browsers and performs the same in all the preferred browsers.

3 LineControl – HTML5 jQuery Plugin

PLUGIN PAGE | DEMO
PLUGIN PAGE | DEMO

About LineControl

LineControl is a Free and Open Source Jquery Plugin that allows you to add a beautiful, responsive and fast online Text Editor to your web application/site. LineControl is designed to work with Twitter Bootstrap and as a Jquery Plugin.

  • Lightweight and highly extensible.
  • Developed in JQuery plugin method
  • Responsive design with Bootstrap
  • Easy integration with any applications
  • No third party plugins required
  • Customizable options, menus and themes
  • X-browser support.

4 Yellow Text – jQuery Plugin

PLUGIN PAGE | DEMO
PLUGIN PAGE | DEMO

About Yellow Text

This is a lightweight and simple to use jQuery text editor plugin. The plugin theme is built using SASS and Compass. This is an easy to install and use plugin for developers without much pain. This is a rich text editor.

5 Froala WYSIWYG text editor plugin – WYSIWYG & jQurey

DEMO | PLUGIN PAGE
DEMO | PLUGIN PAGE

About Froala Text Editor

It is a beautiful jQuery WYSIWYG text editor build using the latest technology and trends in the industry.

Some of the features include:

  • Cross Browser Support
  • Cross Platform Support
  • Complete functionality
  • Auto-save features
  • High performance
  • Retina ready
  • Image support
  • Easy to use without the knowledge of coding

6 SCEditor WYSIWYG BBCode Text Editor – WYSIWYG & jQuery

DEMO | PLUGIN PAGE
DEMO | PLUGIN PAGE

About SCEditor Text Editor

A lightweight WYSIWYG BBCode and XHTML editor. Works on most of the browsers. Easy to use.

7 Markitup Text Editor – jQuery Plugin

DEMO | PLUGIN PAGE
DEMO | PLUGIN PAGE

About Markitup jQuery Text Editor

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.

Features:

  • Fast and unobtrusive integration
  • Support for keyboard shortcuts
  • Toolbar and drop down menus
  • Fully customizable and scriptable
  • Editor’s features callable from any place
  • Ajax dynamic preview
  • Customizable Skins

8 elRTE WYSIWYG Rich Text Editor Plugin

DEMO | PLUGIN PAGE
DEMO | PLUGIN PAGE

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

Features:

  • Advanced work with CSS
    • Setting indentation (margins, paddings) for images and table cells (seperate for each direction)
    • Controlling border properties (width, style, color) with convenient dialogs
    • Writing element properties as CSS-style always when possible
  • Lightweight, fast and easy to integrate
  • Interface appearance is configured from one CSS file
  • No templates used
  • i18n. The editor can be easily localized into any language
  • Designed to work with elFinder file manager, but can also be used with any other
  • Flexible for extensions

9 jQuery Notebook Text Editor- jQuery Plugin

DEMO | PLUGIN PAGE
DEMO | PLUGIN PAGE

About jQuery Notebook

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

This plugin has command line controls to edit the text some of the commands are:

  • Ctrl/Command B – Bold
  • Ctrl/Command I – Italic
  • Ctrl/Command U – Underline
  • Ctrl/Command F1 – Header 1
  • Ctrl/Command F2 – Header 2
  • Ctrl/Command Z – Undo

10 Halo.js Rich Text Editor – jQuery

DEMO | PLUGIN PAGE
DEMO | PLUGIN PAGE

About Halo.js

Hallo is a very simple in-place rich text editor for web pages. It uses jQuery UI and the HTML5 contentEditable functionality to edit web content.

The widget has been written as a simple and liberally licensed editor. It doesn’t aim to replace popular editors like Aloha, but instead to provide a simpler and more reusable option.

11 TinyMCE Rich Text Editor Plugin- jQuery Plugin

DEMO | PLUGIN PAGE
DEMO & PLUGIN PAGE

About TinyMCE

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL.

TinyMCE has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances.

12 CLEditor jQuery Rich Text Editor – jQuery Plugin

DEMO & PLUGIN PAGE
DEMO & PLUGIN PAGE

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.

13 SCEditor WYSIWYG HTML Page Editor Plugin

DEMO | PLUGIN PAGE
DEMO & PLUGIN PAGE

A lightweight WYSIWYG BBCode and XHTML editor.

14 Fresher Editor jQuery RTE Plugin

FresherEditor-jQuery-RTE-Plugin
DEMO | PLUGIN PAGE

About FresherEditor

freshereditor is an html editor built base on the jQuery ContentEditable plugin with the following improvements:

  • plugin automatically builds toolbar, have option to specify buttons to hide (see example)
  • supports text alignment
  • supports font size and name selection
  • supports foreground and background selection with built-in color picker (using farbtastic color picker plugin)
  • minor rewrite to make code less redundant since lots of command have the form: document.execCommand(cmd, false, null);
  • uses Twitter’s bootstrap.css

15 NiceEdit WYSIWYG RTE Plugin

DEMO & PLUGIN PAGE
DEMO & PLUGIN PAGE

NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser.

NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

16 LightWeight RTE jQuery Plugin

DEMO | PLUGIN PAGE
DEMO | PLUGIN PAGE

17 WysiBB RTE Plugin

DEMO & PLUGIN
DEMO & PLUGIN

Basic Text Editor jQuery Plugins

18 Jeditable Editor jQuery Plugin

DEMO | PLUGIN PAGE
DEMO | PLUGIN PAGE

19 PhenoEdit Basic Text Editor jQuery Plugin

DEMO & PLUGIN PAGE
DEMO & PLUGIN PAGE

20 jEdi Basic Text Editor Plugin

DEMO & PLUGIN PAGE

DEMO & PLUGIN PAGE

Hope you enjoyed this inspirational article on the list of rich text editor plugins using jQuery and WYSIWYG. If you find any other text editor plugins which looks awesome to you, please don’t hesitate to share with us. We would be happy to enrich our users with the appropriate resources.



,

Comments are closed.