Author: | neisbut |
---|---|
Views Total: | 54 views |
Official Page: | Go to website |
Last Update: | April 5, 2023 |
License: | MIT |
Preview:

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