Question

我正在使用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拒绝在firebug中工作的地方："getElementById("text_content").document UNDEFIEND"

我在该页面上运行的每个其他execCommand函数（例如：斜体粗体，字体颜色等等）都有效，但是这里没有，可以请一些人帮我找出解决方案吗？

Answer 1

在document元素中获取<iframe>对象的标准方法是通过其contentDocument属性而不是document。某些较旧的浏览器不支持此功能，但您可以使用contentWindow.document代替。

因此，除了那些不支持contentDocument或contentWindow的浏览器之外，以下内容适用于所有浏览器，实际上这些浏览器不在今天：

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");
    });
}

在ajax之后的图像execCommand

1 个答案: