annotator-validation-plugin demo

<!DOCTYPE html>
<html>

  <head >
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://assets.annotateit.org/annotator/v1.2.10/annotator-full.min.js"></script>
    <script src="https://rawgit.com/mwasiluk/annotator-validation-plugin/master/dist/annotator-validation-plugin.min.js"></script>
    
    
    <link rel="stylesheet" href="http://assets.annotateit.org/annotator/v1.2.10/annotator.min.css">
    <link rel="stylesheet" href="style.css" />
    
    <link href="http://annotorious.github.com/css/style.css" rel="stylesheet" type="text/css">

    <script src="script.js"></script>
  </head>

  <body>
    
    <div id="content">
      
      <h1>annotator-validation-plugin demo</h1>
      Annotation validation plugin for Annotator.js
      <br/><br/>
      https://github.com/mwasiluk/annotator-validation-plugin
      
      <br/><br/>
      
      <pre>
  var pluginOptions={
        minLength: false,
        maxLength: 20,
        customValidators: [{
            validator: function(annotation){
                return annotation.text.length > 0;
            },
            message: "Custom validation message"
        }]
    }
      </pre>
      
      <br/>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum justo id euismod hendrerit. Pellentesque eget risus justo. Vestibulum tempor fringilla sapien, sed semper mauris rutrum sed. Praesent eleifend, quam sit amet molestie laoreet, est elit dictum nibh, mattis tincidunt nibh ligula id lacus. Nam cursus neque quis blandit faucibus. Fusce consectetur, purus tempor sodales suscipit, augue velit hendrerit neque, ac dignissim mauris lacus nec lacus. Donec aliquet sit amet velit quis aliquam. In bibendum vel leo eget pharetra. Cras vehicula odio at dapibus cursus. Fusce cursus tristique faucibus. Quisque maximus dolor imperdiet nisi lacinia pellentesque. Donec at tellus ultrices, consectetur ligula sed, laoreet urna. Mauris augue lorem, tempor vel congue ac, fermentum sit amet eros. Nulla facilisi. Aenean bibendum pharetra tellus quis egestas.
      </p>
      <p>
      Integer faucibus cursus velit eu mattis. Proin eget ex turpis. Integer finibus sapien sed eros sollicitudin, vitae volutpat elit porta. Sed enim elit, consectetur eget semper nec, sagittis a nisi. Nam aliquam tortor euismod purus pretium semper. Vivamus semper egestas est, eu vehicula felis condimentum interdum. Quisque tellus metus, lobortis quis vulputate facilisis, luctus vel neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In vel mollis ipsum.
      </p>
      <p>
      In vulputate lorem sed ligula accumsan, et commodo libero pulvinar. Nam dolor dui, lobortis eget imperdiet eu, elementum at mi. Vestibulum sed lectus eros. Suspendisse mauris felis, tristique ut blandit at, euismod dapibus orci. Fusce vestibulum mauris ornare molestie sodales. Nullam pretium arcu dolor, a vehicula justo bibendum in. Donec tincidunt in neque vitae varius. Integer sapien odio, gravida ac volutpat quis, fermentum at massa. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      </p>
      <p>
      Ut ultricies cursus diam at accumsan. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras porttitor turpis justo, id scelerisque nulla interdum non. Morbi laoreet sapien at tincidunt rutrum. Integer eget convallis tellus. Praesent arcu mi, maximus a eros auctor, lobortis interdum turpis. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec elementum malesuada egestas. Aliquam et tincidunt urna, ac feugiat ligula. Phasellus a justo eget arcu rutrum maximus vel sed libero. Praesent facilisis turpis ex, a ultricies lectus viverra quis. Fusce tristique ligula leo, at pharetra nibh faucibus eu.
      </p>
      <p>
      Curabitur feugiat egestas blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam viverra vestibulum quam, at vestibulum leo semper ut. Nunc egestas tincidunt eros ut consectetur. Phasellus at sem a magna convallis hendrerit sed at nulla. Aliquam porta massa lacus, at blandit eros posuere non. Phasellus nec purus non felis tincidunt interdum in id mi. Maecenas pellentesque mauris eu libero laoreet, sed efficitur risus fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut hendrerit odio, eu tristique mi. Aliquam in urna aliquet, malesuada ex quis, facilisis neque. Nulla vitae accumsan leo, cursus imperdiet eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      
      <br/>
      
    </div>
  </body>

</html>

$(function() {
  // Setup the annotator on the page.
  var content = $('#content').annotator();
  
  
  // You can optionally specify plugin options:
  var pluginOptions={
      minLength: false,
      maxLength: 20,
      customValidators: [{
          validator: function(annotation){
              return annotation.text.length > 0;
          },
          message: "Custom validation message"
      }]
  }
  
  // Add plugin.
  content.annotator('addPlugin', 'Validation', pluginOptions);
});

/* Styles go here */