How to use Rangy's toggleRange method?

Question

I'm using the following code to insert a link inside the a range.

I have the following function which being called by a button to save the selected text. Then it shows the linkBar div which include a text input for link insertion.

Notice: when I focus in the input text inside the text input I lose the selection so I'm trying to use toggleRange() instead of toggleSelection.

function linkIt(){
if (savedSel) {
rangy.removeMarkers(savedSel);
}
savedSel = rangy.saveSelection();
savedSelActiveElement = document.activeElement; 

$("#linkBar").css({"display":"block", "top": "150px", "left": "500px"});

}

After that I have the following code that execute once a button is clicked in the same div which was showed by the previous function.

    submitLink.ontouchstart = submitLink.onmousedown = function() {
        var linkName = $("#linkText").val();
        toggleLink(linkName);
        $("#linkBar").css({"display":"none"});
        if (savedSel) { 
            rangy.restoreSelection(savedSel, true);
            savedSel = null;
            gEBI("restoreButton").disabled = true;
            window.setTimeout(function() {
                if (savedSelActiveElement && typeof savedSelActiveElement.focus != "undefined") {
                    savedSelActiveElement.focus();
                }
            }, 1);
        } 

        return false;
    }

This function calls the following function to apply the linkApplier to the selected range. But It does NOT work

function toggleLink(linkName) {
    linkApplier = rangy.createCssClassApplier("link", {
        elementTagName: "a",
        elementProperties: {
            href: linkName,
            title: "Rangy home page",
            target: "_self"
        }
    });
    //linkApplier.toggleSelection();
    linkApplier.toggleRange(savedSel);
}

Yeah, I'm aware of this question :) It's on my list. – Tim Down Feb 10 '13 at 23:51 — Tim Down, Feb 10 '13 at 23:51

score 0 · Answer 1 · answered Feb 11 '13 at 01:13

You need to call toggleSelection() after the selection has been restored. I think the following will fix it (untested):

submitLink.ontouchstart = submitLink.onmousedown = function() {
    var linkName = $("#linkText").val();
    $("#linkBar").css({"display":"none"});
    if (savedSel) { 
        rangy.restoreSelection(savedSel, true);
        toggleLink(linkName);
        savedSel = null;
        gEBI("restoreButton").disabled = true;
        window.setTimeout(function() {
            if (savedSelActiveElement && typeof savedSelActiveElement.focus != "undefined") {
                savedSelActiveElement.focus();
            }
        }, 1);
    } 

    return false;
};

How to use Rangy's toggleRange method?

1 Answers1