Search code examples
javascriptiframerangy

rangy - how to work with content in iframe


I need your help about rangy library .

How can I apply rangy within iframe selected content, i cant to understand ((

this code in my page create red bold selection with ALL iframe content, but I need to apply it to only user selection

var cssApplier;
$("#ok_button").click(function()
{
    var iframe = document.getElementById("iframe_id");
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    var range = rangy.createRange(iframeDoc);
    cssApplier.applyToRange(range);
});


$("iframe#iframe_id").load(function()
{
         rangy.init();
    cssApplier = rangy.createCssClassApplier("boldRed", {normalize: true});
});

Solution

  • You need to get the selection from the iframe. Here's how:

    var cssApplier;
    $("#ok_button").click(function()
    {
        var iframe = document.getElementById("iframe_id");
        var iframeWin = rangy.dom.getIframeWindow(iframe);
        cssApplier.applyToSelection(iframeWin);
    
        // In Rangy 1.3, you can pass the iframe object directly into
        // applyToSelection so the previous two lines become:
        // cssApplier.applyToSelection(iframe);
    });
    
    
    $("iframe#iframe_id").load(function()
    {
             rangy.init();
        cssApplier = rangy.createCssClassApplier("boldRed", {normalize: true});
    });