I am currently developing a WYSIWYG editor and encountering an issue with image handling using execCommand. Here is a simplified example of my page structure:
<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 JavaScript I am using, in a nutshell, involves showing the hidden div to upload an image via ajax and display all uploaded images:
<script>
$("#img_submit").click(function(){
$("#img_handle").show();
/* HANDLE IMG UPLOAD WITH AJAX AND RELOAD ALL IMAGES INTO #images DIV */
});
</script>
Everything works fine - once a new image is uploaded via ajax, it is appended to the images div like this:
function loadImgs(){
var loadImages="PATH/TO/URL";
$.post(loadImages, {request:"loadImages"}, function(response){
$("#images").append(response);
insert_img();
});
}
Subsequently, upon clicking on any of the results, the following function is triggered:
function insert_img(){$(".img_insert").click(function(){
var frame = document.getElementById('text_content'); frame.document.execCommand('InsertImage',false,"../PATH/TO/IMG");
});}
However, I encounter an issue where the execCommand fails to work - Firebug displays:
"getElementById("text_content").document UNDEFINED"All other execCommand functions (e.g., italic, bold, font-color) work as intended on the page except for this specific case. Can someone please assist me in finding a solution?