Rangy | How to remove highlighted text with click event on span tag?

Question

As the rangy library says that, we need to select text to make it highlight and remove highlight.

For highlighting it includes span tag.

For removing highlight text I want to click on span tag instead of select that text.

this is library method is used to remove highlight:

 unhighlightSelection: function(selection) {
                selection = selection || api.getSelection();
                console.log(selection.getAllRanges())
                var intersectingHighlights = this.getIntersectingHighlights( selection.getAllRanges() );
                this.removeHighlights(intersectingHighlights);
                selection.removeAllRanges();
                return intersectingHighlights;
            }

here selection variable occupied with api.getSelection() instead of local selection variable.

I think it's sufficient to all of you to understand my problem.

I can give more description about that if you want.

Can I do something that to occupied the selection variable same as api.getSelection() without using it?

or what I do to achieve it?

Any suggestion will be grateful for me.

Thank you

Answer 1

Assuming that what you want is to be able to click on a highlight to get rid of it, I suggest something like the following (which has support for IE 6-8; I don't know whether you need that but Rangy supports it). The crucial methods are the getHighlightForElement() and removeHighlights():

document.onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    var highlight = highlighter.getHighlightForElement(target);
    if (highlight) {
        highlighter.removeHighlights( [highlight] );
    }
};