VasonEditor - a jQuery html editor plugin

This is my examination assignment in course "Javascript" in springterm 2014, on Blekinge Tekniska Högskola (Blekinge Institute of Technology), Sweden.

Working Demo

Take a glance at my charming VasonEditor.

Requirements

This plugin works with all browsers that can handle HTML5 LocalStorage feature.

Why use this plugin?

You can easily use this plugin in all your websites. It looks and works like an editor created for content management systems as WordPress, Joomla or Drupal, but is far more easy to use!

Just follow the easy steps for installation and use. Also look at the fancy features described in the bottom. Have fun!

Instructions for use

1. Download and unzip the vasonEditor package from GitHub.

2. Put files and directories in your website directory.

3. In your index-file, copy all necessary links and paste them inside the head.

<link rel='stylesheet' type='text/css' href='style/vasonEditor.css' /> <script src="http://code.jquery.com/jquery-latest.min.js">&lt;/script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">&lt;/script> <script src="http://modernizr.com/downloads/modernizr-latest.js">&lt;/script> <script src="script/vasonEditor_functions.js"></script> <script src="script/vasonEditor_main.js"></script>

4. Insert vasonEditor anywhere in your webpage. The editor will be placed on the exact spot where you put the code.

<div id="vasonEditor"> <script type="text/javascript"> $(document).ready( function() { $('#vasonEditor').vasonEditor(); }); </script> </div>

Features in vasonEditor

• Code mode, for creating or editing text.
• View mode, for viewing result.
Make text bold.
Make text italic.
Use header 2.
Use header 3.
Bullet list.
Numbered list.
All content left-justified.
All content centered.
All content right-justified.
All content margin justified.
Superscript.
Subscript.
Background color, pick from swatches.
Text color, pick from swatches.
Heading color, pick from swatches.
Blockquoting.
Insert link.
Insert image and image caption.

Edit color swatches

To edit the color swatches, open the vasonEditor_functions.js in script directory. Change colors, on lines 209—212. Find colors or color codes to use on http://www.w3schools.com/html/html_colornames.asp.

var swatches = [
  {"col1":"white","col2":"mistyrose","col3":"lightcyan","col4":"honeydew","col5":"lightyellow"},
  {"col1":"lightgray","col2":"lightpink","col3":"lightskyblue","col4":"palegreen","col5":"yellow"},
  {"col1":"gray","col2":"indianred","col3":"dodgerblue","col4":"limegreen","col5":"gold"},
  {"col1":"black","col2":"maroon","col3":"blue","col4":"green","col5":"darkorange"}
];

To-Do

• More functions to use.
• Possibility to enable / disable functions.
• Use with SQLite or MySQL databases.

Change Log

• v1.0 - First release of vasonEditor | 2014-05-24
• v1.1 - Minor changes in instructions (README.md) | 2014-05-29