Developing Plugins

Plugins enable you to modify and extend Annotorious in all sorts of ways. Right now, the Plugin API is still under development, so not all things work just yet. But in general, you will be able to do things such as:

• Modify or extend the annotation info-window popups and the editor (100% complete). Basic use cases could be: additional UI components for adding tags to annotations, or the integration of a text formatter to render markdown- or HTML-formatted annotations. (Also see similar plugins for the Annotator Web annotation system for reference.)

• Hook into the Annotorious event lifecycle, e.g. intercept annotation 'create' and 'remove' events (100% complete). A typical use case for this would be to connect different types of storage backends, such as different flavours of REST backends or local storage.

• Add additional selection tools and shape types, such as freehand selection (80% complete).

Example 1: Hello World

This short example plugin adds an additional label to Annotorious' annotation popup bubble, which displays a Hello World message, and the number of characters of the annotation text.

annotorious.plugin.HelloWorldPlugin = function(opt_config_options) { }

annotorious.plugin.HelloWorldPlugin.prototype.initPlugin = function(anno) {
  // Add initialization code here, if needed (or just skip this method if not)
}

annotorious.plugin.HelloWorldPlugin.prototype.onInitAnnotator = function(annotator) {
  // A Field can be an HTML string or a function(annotation) that returns a string
  annotator.popup.addField(function(annotation) { 
    return '<em>Hello World: ' + annotation.text.length + ' chars</em>'
  });
}

// Add the plugin like so
anno.addPlugin('HelloWorldPlugin', {});