Plug in to view annotations in a right panel.
JavaScript HTML CSS Other
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.idea search engine Jan 27, 2015
demo annotator touch Oct 23, 2014
demo_search Search Jan 27, 2015
lib search Jan 26, 2015
locale editor panel Oct 16, 2014
src Update style.css Sep 20, 2016 Update Nov 23, 2016
license.rst Update license.rst Jul 30, 2014

Margin Viewer for Annotator

##Margin viewer Annotator Plugin

view_annotator.js is a plugin for Annotator to view the current annotations in a panel in the right side.


To use the tool you need to install the Annotator plugin to annotate text.

    <script src="../lib/jquery-1.9.1.js"></script>
    <script src="../lib/annotator-full.1.2.9/annotator-full.min.js"></script>
    <!-- Locale for language -->
    <script src="../lib/jquery-i18n-master/jquery.i18n.min.js"></script>
    <!-- For show the annotation creation date -->
    <script src="../lib/jquery.dateFormat.js"></script>
    <!-- File with the translations -->
    <script src="../locale/en/annotator.js"></script>
    <!-- Scroll panel -->
    <script src="../lib/jquery.slimscroll.js"></script>
    <!-- annotator -->
    <link rel="stylesheet" href="../lib/annotator-full.1.2.9/annotator.min.css">
    <link rel="stylesheet" href="../src/css/style.css">
    <!-- anotator plug in -->
    <script src="../src/view_annotator.js"></script>
    <script src="../src/categories.js"></script>
    <script src="../lib/tinymce/tinymce.min.js"></script>
    <script src="../src/richEditor.js"></script>
      jQuery(function ($) {
                    var annotator = $('body').annotator().annotator().data('annotator');
                    var propietary = 'demoUser';
                    annotator.addPlugin('Permissions', {
                        user: propietary,
                        permissions: {
                            'read': [propietary],
                            'update': [propietary],
                            'delete': [propietary],
                            'admin': [propietary]
                     showViewPermissionsCheckbox: true,
                     showEditPermissionsCheckbox: false
                  $('body').annotator().annotator('addPlugin', 'RichEditor');
                  $('body').annotator().annotator('addPlugin', 'Categories',{
                           subratllat:'annotator-hl-subratllat' }
                  $('body').annotator().annotator('addPlugin', 'AnnotatorViewer');
                  //Annotation scroll
                  $('#anotacions-uoc-panel').slimscroll({height: '100%'});


The annotations that you create are displayed in the panel. You can delete an anotation, you can acces at the point of text that has been anotated, open an annotation, close an annotation, toggle the panel, scroll the panel if there are several annotations and a little label where you can view how many annotations are currently.

You can filters annotations: My annotations and shared annotations.

#Release 1.10

  • Edit text annotation in the panel.

#Release 1.12

  • Edit text annotation panel with tinymce


The view annoator plugin, use the property categorize, to change the annotation color category (default value highligth, defined in the css), and an order property to sort the annotations in the panel. Each annotation in the right panel needs a unique Id, annotator when use a back end, a unique Id is assigned to each annotation after creation, but in the Viewer panel offline I don have this Id, for this reason we generate the unique Id with a function uniqueId() in the plugin.

Experimenting with a Full Text Search using lunr.js, new plug-in called searh.js that uses this library with the panel viewer to serach inside the annotations.

##Offline Demo

  • Demo in demo/anotacions.html
  • Demo in demo_tinymce/annotation.html
  • Demo in demo_search/annotations.html

##Online Demo Complete functional demo with MySQL Backend and developed in nodejs Demo Frankenstein with [] (

The panel in this demo is little different, in the red square you can see How many people is reading the document.