0

我正在使用 WYSIWYG 编辑器并遇到使用 execCommand 处理图像的问题，以下是我的页面结构的简化示例：

<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>

我正在使用的简化的 JavaScript，基本上显示隐藏的 div 使用 ajax 上传图像并显示所有上传的图像：

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

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

现在，所有这些都可以正常工作 - 只要使用 ajax 上传新图像，我就会将其附加到图像 div：

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

然后，单击任一结果，我运行以下函数：

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

现在，这里是 execCommand 拒绝在我得到的萤火虫中工作的地方："getElementById("text_content").document UNDEFIEND"

我在该页面上运行的所有其他 execCommand 函数（例如：斜体粗体、字体颜色等）都可以工作，但在这里不行，有人可以帮我找出解决方案吗？

4

1 回答 1

2

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");
    });
}
于 2013-03-30T16:57:45.620 回答