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. Download: Git Hub | vasonEditor

Requirements

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

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.
  4. <link rel='stylesheet' type='text/css' href='style/vasonEditor.css' />
    <link rel='apple-touch-icon' href='/storage/app/media/apple-touch-icon.png' />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
    <script src="script/vasonEditor_functions.js"></script>
    <script src="script/vasonEditor_main.js"></script>
    
  5. Insert vasonEditor anywhere in your webpage. The editor will be placed on the exact spot where you put the code.
  6. <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, in a WYSIWYG manner.

Description of buttons in panel

  • Make text bold.
  • Make text italic.
  • Use heading 2.
  • Use heading 3.
  • Bullet (unordered) list.
  • Numbered (ordered) list.
  • All content left-aligned.
  • All content centered.
  • All content right-aligned.
  • All content justified.
  • Superscript (m2).
  • Subscript (H2O).
  • Background color.
  • Text color.
  • Headings color.
  • Make blockquote.
  • Insert a link.
  • Insert image and image caption.