VasonEditor - a jQuery html editor plugin
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img
script
style
.DS_Store
README.md
index.html

README.md

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>

  1. 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.
Image Make text bold.
Image Make text italic.
Image Use header 2.
Image Use header 3.
Image Bullet list.
Image Numbered list.
Image All content left-justified.
Image All content centered.
Image All content right-justified.
Image All content margin justified.
Image Superscript.
Image Subscript.
Image Background color, pick from swatches.
Image Text color, pick from swatches.
Image Heading color, pick from swatches.
Image Blockquoting.
Image Insert link.
Image 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