jQuery ClassyEdit

Overview

ClassyEdit is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that you can use to replace your standard textarea boxes with this easy to use, aesthetically pleasing, simple rich text editor.

  • Bold, Italic, Underline, Lists, Links, HTML Source.
  • Animation for showing/hiding the toolbar.
  • Multiple instances on one page.
  • Switch on / off button.

Usage

First you need to include the jQuery library, since ClassyEdit is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Secondly, you need to include the jQuery ClassyEdit javascript and the css file into your page. You can do it by adding the code below to your page.

<script src="js/jquery.classyedit.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classyedit.css" />

Next, you add a textarea into the page.

<textarea class="classy-editor"></textarea>

As the last step, you trigger the ClassyEdit() function on the element you just created. In this case, we trigger the editor on the element with the class class-editor.

$(".classy-editor").ClassyEdit();

Demo