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?