neisbut / textannotator Goto Github PK

So I can easily change the css style of annotated text.

About 20 lines of code.

// usage:
// 1. mouse select text range to highlight
// 2. click on highlighted range to remove highlight
//
(function () {
    // rangy.init(); // init() by default?

    // highlight selected text range
    $('#yuedu').mouseup(function(e) {
        rangy.getSelection();
        rangy.createCssClassApplier('annotation').applyToSelection(); 
    });

    // remove hightlight
    $('#yuedu').delegate("span", "click", function (e) {
        var text = $(this).text();
        $(this).replaceWith(text);
    });
    // prevent nested hightlight
    $('#yuedu').delegate("span", "mousedown", function (e) {
        var text = $(this).text();
        $(this).replaceWith(text);
    });
})();

demo repo at: https://github.com/404pnf/textAnnotation-mimic-kindle-effect

Thank you again for showing me how to do this by your code!

I see a function, that's remove every highlight element.

/**
 * Removes annotation from element
 * @export
 */
tvs.ElementAnnoationInfo.prototype.remove = function() {
    goog.array.forEach(this.annotationElements, goog.dom.removeNode);
    delete this.annotetedElement[this.elPropName];
    this.annotetedElement = null;
};

Can I remove a single one by select / hover over an highlighted element and click on a "delete" tooltip?

Thank you!

Can you suggest a good way to save these highlights to that the user would see them everytime they come back to that page?

When I used the library to implement annotation on HTML and if I put those annotations under an element with scroll. The annotations couldn't retain their position relative to the element. I am attaching a screenshot of the issues I found .
Compare both images before and after scroll

Is it somehow possible to remove all annotations at once, eg, by clicking on a button?

I found this library after reading this article:
http://www.toptal.com/javascript/annotating-texts-on-the-web-using-svg

It seems that the text annotations are implemented via divs with position: absolute that are appended to the body. Those divs have a repeating SVG for a background image.
I tried it, and it was possible to simply set the background-image property of the

The only downside I see is that using this it's only possible to have a single effect on a piece of text. However, this trivially fixes any resizing and text-movement issues.

What is the rationale behind having position:absolute overlays versus simply setting the background of the s?