Underline/Highlight/Strike Text With The textAnnotator Library

TextAnnotator is a simple-to-use JavaScript plugin that allows you to create and manage text annotations with just a few lines of code. It currently supports underlining, highlighting, and striking out text, as well as annotating the selected text.

Ideal for Educational Platforms, CMS, Collaborative Editing, Note-taking and Research Applications, and more.

How to use it:

1. Download and load the textAnnotator’s files in the document.

<!-- Required Stylesheet -->
<link href="/path/to/css/annotator.css" rel="stylesheet" />
<!-- Core JavaScript -->
<script src="/path/to/annotator.min.js"></script>
<!-- Extra Templates -->
<script src="/path/to/js/annotatorExtra.js"></script>
<!-- Annotate The Selected Text -->
<!-- OPTIONAL -->
<script src="/path/torangy-core.js"></script>
<script src="/path/torangy-classapplier.js"></script>

2. Create a new instance of the textAnnotator.

var instance = new tvs.Annotator();

3. Annotate text inside an element. Available types:

• brush
• combined
• dashed
• dotted
• double
• solid
• squiggly

// underline
instance.underline(element, type, color);
// highlight
instance.highlight(element, type, color);
// underline
instance.strike(element, type, color);

4. You can also apply annotations to your text using the data-annotate attribute:

<span data-annotate="underline squiggly yellow">
  underline
</span>, 
<span data-annotate="highlight brush green">
  highlight
</span>,
<span data-annotate="strike dashed blue">
  strike
</span>

instance.annotateDocument();

5. Add a new annotation template to the textAnnotator.

tvs.AnnotatorDictionary.svgTemplates['custom'] = new tvs.Template(new tvs.SvgTemplatePart(
  '<line y2="3" x2="4" y1="3" x1="0" ' +
      'stroke-dasharray="2, 2" ' +
      'stroke-width="2" stroke="{0}" fill="none"/>', // svg content
  4, // width of canvas
  5, // height of canvas
  'repeat'// apply method
));