HTMLArea编辑器图片上传

前两天做这个HTMLArea编辑器图片上传功能，期间遇到好几个郁闷的事情，在此留个痕迹，方便以后查阅。

最开始是HTML页面里表单字段的name写成了关键字url，使我在提交表单的时候不执行action处的文件。一直找不到错误，很是苦恼啊。后来干脆直接测试框架，果然，错误找到了，就是这个url 在作怪！由此也让我得出了一个教训就是：不要轻易的使用关键字。

之前用FCK的时候也做过这个图片上传，没遇到过什么大问题。这个HTMLArea编辑器不知道是不是因为很少人用，在网上的资料比较少。在网上搜到的很多资料，都是图片上传之前的预览，基本没有涉及到上传之后的预览，插入图片页面如下：

大致功能是：点击编辑器上的插入图片，弹出插入图片页面，图片上传成功后显示在预览区，点击插入按钮将图片插入到编辑器。

 

至于上传图片，这是太熟悉不过的，这里就不再��嗦了。

从上传成功开始吧：

当图片上传成功后，此时服务器对外生成了这个图片的地址，我让服务器返回这个地址给客户端，这里涉及到服务器端和客户端的通信，怎么把服务器返回的数据传给客户端呢？通常的做法是用AJAX。我是为了省事儿，直接在服务器端脚本处这样写：

print "<script>    
    parent.showPic('".$image_url."');
            </script>
            ";

此时只要在客户端脚本定义showPic函数即可。这个地方我是把服务器对外生成的图片地址传给了客户端，脚本如下：

function showPic(pUrl) {
document.getElementById('f_url').value = pUrl;    
  document.all.ipreview.contentWindow.document.body.innerHTML = "<img src='"+pUrl+ "' height='180' width='280'>";
}

pUrl即是图片地址。

后面这一句

document.all.ipreview.contentWindow.document.body.innerHTML = "<img src='"+pUrl+ "' height='180' width='280'>";

的意思是“用这个<img>填充id为ipreview的iframe”。

至于怎么获取iframe的内容我将在下篇文章进行讲解，以前没怎么留意过这些细节，也让我疯狂了好久的。哈哈......

言归正传，此时图片已经在预览区了，看到图片了吗？FIREFOX可能够呛哟，因为FIREFOX为了安全，阻止了本地图片的显示(我是在本地做测试的)，如果你偏要让本地图片在FF里显示，也没有不可能哦，只需要你下载一个FF插件就可以了，具体的没研究过。嘿嘿~

现在图片上传成功了，预览区也有图片了，OK，该是最后一个动作，点击“插入”按钮，将图片放到编辑器中。代码可用：

function onOK() {
     var required = {
         "f_url": "You must enter the URL"
    };
     for ( var i in required) {
         var el = document.getElementById(i);
         if (!el.value) {
            alert(required[i]);
            el.focus();
             return false;
        }
    }
     // pass data back to the calling window
     var fields = [ "f_url", "f_alt"];
     var param = new Object();
     for ( var i in fields) {
         var id = fields[i];
         var el = document.getElementById(id);
        param[id] = el.value;
    }
    __dlg_close(param);
     return false;
};

现在看看你的编辑器， 是不是有图片了呀？

好了，大功告成！下次再做类似的应该不会有那么多问题了。