Underline/Highlight/Strike Text With The textAnnotator Library

Category: Javascript , Text | April 5, 2023
Author:neisbut
Views Total:237 views
Official Page:Go to website
Last Update:April 5, 2023
License:MIT

Preview:

Underline/Highlight/Strike Text With The textAnnotator Library

Description:

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
));

You Might Be Interested In:


Leave a Reply