openannotation / annotator

Annotation tools for the web. Select text, images, or (nearly) anything else, and add your notes.
http://annotatorjs.org
Other
2.69k stars 530 forks source link

Unable to console.log store pluggin output getting following error ---- Could not load Tags plugin. Have you included the appropriate <script> tag? #716

Open Sam131112 opened 3 years ago

Sam131112 commented 3 years ago

I am trying to test run annotator js 1.2 version with a very simple example which writes annotation in console log on creatin here is my server and html code

// Server Code

const express = require("express");
const { v4: uuidv4 } = require('uuid');
const annotator = require('annotator');
var path = require('path');

const app = express();

var allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Expose-Headers', 'Content-Length, Content-Type, Location');
  res.header('Access-Control-Allow-Headers', 'Content-Length, Content-Type, X-Annotator-Auth-Token, X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
  res.header('Access-Control-Max-Age', '86400');

  // intercept OPTIONS method
  if ('OPTIONS' == req.method) {
    res.status(200);
  }
  next();
};

app.use(allowCrossDomain);
app.use(express.static(__dirname + '/public'));
app.use(express.json({limit:'50mb'}));
app.get('/',function(req,res) {
    res.sendFile('/home/ukpuser/Downloads/fh1000/demo5.html')

});

app.listen(3001,()=> console.log('listening to port 3001'));

app.post('/api/annotations',(req,res)=> {
    let id = uuidv4();
    let annotobj = { "id":id , "quote":req.body.quote , "ranges":req.body.ranges , "text":req.body.text};
    console.log("POST: ");
    console.log(annoobj);
    });

// Html Code

<!DOCTYPE html>
<html>
<head>
<script src='js/jquery.js'></script>
<script src='js/json2.js'></script>

<script src='js/annotator.min.js'></script>
<link rel='stylesheet' type="text/css" href='css/annotator.min.css'>
</head>
<body>

<div id="content">
<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>
</div>
<script>  
jQuery(function ($) {
      var content = $(document.body).annotator();
      content.annotator('addPlugin', 'Tags'); 
  });
</script> 
</body>
</html>

This is the simplest possile example and i am not able able to understand why its not working. Any help will be highly appreciated