Development

Getting Started

Building a plugin is very simple. Simply attach a function that creates your plugin to the Annotator.Plugin namespace. The function will receive the following arguments.

• element: The DOM element that is currently being annotated.

Additional arguments (such as options) can be passed in by the user when the plugin is added to the Annotator. These will be passed in after the element.

  Annotator.Plugin.HelloWorld = function (element) {
    var myPlugin = {};
    // Create your plugin here. Then return it.
    return myPlugin;
  };

Using Your Plugin

Adding your plugin to the annotator is the same as for all supported plugins. Simply call "addPlugin" on the annotator and pass in the name of the plugin and any options. For example:

  // Setup the annotator on the page.
  var content = $('#content').annotator();
  
  // Add your plugin.
  content.annotator('addPlugin', 'HelloWorld' /*, any other options */);

Setup

When the annotator creates your plugin it will take the following steps.

1. Call your Plugin function passing in the annotated element plus any additional arguments. (The Annotator calls the function with new allowing you to use a constructor function if you wish).
2. Attaches the current instance of the Annotator to the .annotator property of the plugin.
3. Calls .pluginInit() if the method exists on your plugin.

pluginInit()

If your plugin has a pluginInit() method it will be called after the annotator has been attached to your plugin. You can use it to set up the plugin.

In this example we add a field to the viewer that contains the text provided when the plugin was added.

  Annotator.Plugin.Message = function (element, message) {
    var plugin = {};

    plugin.pluginInit: function () {
        annotator.viewer.addField({
          load: function (field, annotation) {
            field.innerHTML = message;
          }
        })
    };

    return plugin;
  }

Usage:

  // Setup the annotator on the page.
  var content = $('#content').annotator();
  
  // Add your plugin to the annotator and display the message "Hello World"
  // in the viewer.
  content.annotator('addPlugin', 'Message', 'Hello World');

Extending Annotator.Plugin

All supported Annotator plugins use a base "class" that has some useful features such as event handling. To use this you simply need to extend the Annotator.Plugin function.

  // This is now a constructor and needs to be called with `new`.
  Annotator.Plugin.MyPlugin = function (element, message) {
    
  };
  Annotator.Plugin.MyPlugin.prototype = new Annotator.Plugin()

Annotator API

Annotator Events

Annotator.Viewer API

Annotator.Editor API