image execCommand after ajax

Question

I'm working on a WYSIWYG editor and experiencing a problem with the image handling using execCommand, the following is a simplified example of my page structue:

<div id="buttons_panel"><input id="img_submit" type="button"/></div>

<div id="img_handle" style="display:none;">
<div id="ajax_upload"></div> /* AJAX IMG UPLOAD FROM */
<div id="images"></div> /* DIV FOR ALL UPLOADED IMAGES DISPLAY */
</div>

<iframe id="text_content"></iframe>

the simplified JavaScript I'm using, basically showing the hidden div uploading an image with ajax and displaying all uploaded images:

<script>
$("#img_submit").click(function(){
$("#img_handle").show();

/* HANDLE IMG UPLOAD WITH AJAX AND RELOAD ALL IMAGES INTO #images DIV */
});
</script>

Now, all of this works just fine - as soon as the new image is uploaded with ajax I append it to the images div:

function loadImgs(){
var loadImages="PATH/TO/URL"; 
$.post(loadImages, {request:"loadImages"}, function(response){
$("#images").append(response);
insert_img();
});
}

Then, on click on either of the results i run the following function:

function insert_img(){$(".img_insert").click(function(){
var frame = document.getElementById('text_content'); frame.document.execCommand('InsertImage',false,"../PATH/TO/IMG"); 
});}

Now, here is where the execCommand refuses to work in firebug i get: "getElementById("text_content").document UNDEFIEND"

Every other execCommand functions I run on that page (ex: italic Bold, font-color etc..) works, but here it doesn't, can some one please help me figure out a solution?

Answer 1

The standard way to get hold of the document object within an <iframe> element is via its contentDocument property rather than document. This isn't supported in some older browsers but in those you can use contentWindow.document instead.

So, the following will work in all browsers except those which do not support contentDocument or contentWindow, which in practice are not around today:

function getIframeDocument(iframeEl) {
    return iframeEl.contentDocument || iframeEl.contentWindow.document;
}

function insert_img(){
    $(".img_insert").click(function() {
        var frame = document.getElementById('text_content');
        getIframeDocument(frame).execCommand('InsertImage',false,"../PATH/TO/IMG");
    });
}