打开 Freetextbox 的 InsertImageFromGallery 及如何接收 ftb.imagegallery.aspx 返回的图片信息

如何打开 Freetextbox 的 InsertFromGallery 功能
　　
　　eWebEditor、WebHtmlEidtor  等许多在线编辑器默认都有一个功能，可以实时把图片上传到服务器并插入到编辑器里面，而在 Freetextbox 默认的“插入图片”只能让你插入一个图片网址，如果你需要实时上传图片和对图片进行设置的话，就要打开强大的 InsertImageFromGallery  功能。虽然网上能搜到不少的相关文章，但基本上都是没用的，估计可能是版本不同的原因，我下载的版本是3.1.6。

　　首先把下载好的 FTBv3-1-6.zip 解压。然后对应 .Net 的版本 FreeTextBox.dll 添加到 Visual Studio 的工具栏里面，如 .Net 版本是2.0，则在 Visual Studio 2005 里右击“添加选项卡”添加名为“FreeTextBox”的项，右击项在弹出菜单中点击“选择项”，在“.Net Framwork组件”中选“浏览”把 Framework-2.0 里面的 FreeTextBox.dll 添加进去。完成了这一步之后，就可以在任何网站或者Web Project使用FreeTextBox了，只要简单地把工具栏上面的FreeTextBox拖到页面上即可，VS会帮你Copy所需的DLL文件和生成相应的licenses.licx（这个会在你的应用程序根目录，是FreeTextBox的授权文件）。

　　为了打开 InsertFromGallery ，必须先从 FTB 的解压目录把 ftb.imagegallery.aspx 拷贝到网站/Web Project目录下，然后，先把 ftb.imagegallery.aspx 的只读属性去掉，因为需要对它进行一些必要的更改，在源代码视图中，把JavaScriptLocation、UtilityImagesLocation这两项设为InternalResource让它引用DLL的内嵌资源文件。再把AllowImageDelete、AllowImageUpload、AllowDirectoryCreate、AllowDirectoryDelete等都设为true。
　　现在，对页面上的 FreeTextBox 控件进行设置，ImageGalleryPath 指定图片存放的位置（注意要按照此路径建立相应的文件夹），ImageGalleryUrl 指定 ftb.imagegallery.aspx 所在的URL，如果FreeTextBox所在的页与ftb.imagegallery.aspx在同一目录下，则无需设置此项，最后要设置 ToolbarLayout 属性，在 InsertImage 之后加入 InsertImageFromGallery 。
　　这时用浏览器预览之后会在原来的Insert Image按钮右边多出一个按钮来，通过这个就可以实现上传图片文件并对图片进行适当地设置再插入到编辑器中。


　　至此，FreeTextBox 的 InsertImageFromGallery 功能就完全打开了。





如何接收 ftb.imagegallery.aspx 返回的图片信息

　　一般的企业网站很多时候会有产品展示系统，通常会需要独立的图片字段，如缩略图。我们可以利用ftb.imagegallery.aspx 对该字段进行管理。由于使用了InternalResource方式，所以我是通过 Firefox+Web Developer 对Javascript进行观察，当然你也可以使用ExternalFile方式：
　　先把压缩包内aspnet_client文件夹复制到网站的根目录，然后对ftb.imagegallery.aspx和Freetextbox进行相应的设置，以Location为结尾的属性设为ExternalFile，SupportFolder设为"~/aspnet_client/FreeTextBox/"
　　总的来说，InternalResource使用起来比较方便，不用去复制aspnet_client；ExternalFile方式比较灵活，必要时可以自行对资源文件，如js文件进行修改。

　　ftb.imagegallery.aspx 的对接方式还是比较简单的，相关的函数如下：

function  FTB_InsertImage() {
    
    image =  document.getElementById('img_preview');
    src =  document.getElementById('img_preview').src;
    if (src == '' || src == null) return ;
    
    alt =  document.getElementById('img_alt').value;
    title =  document.getElementById('img_title').value;
    width = image.width; //document.getElementById('img_width').value;
    height = image.height; //document.getElementById('img_height').value;
    align =  document.getElementById('img_align').options[document.getElementById('img_align').selectedIndex].value;
    
    hspace =  document.getElementById('img_hspace').value;
    vspace =  document.getElementById('img_vspace').value;
    border =  document.getElementById('img_border').value;
    
    ftb =  document.getElementById('TargetFreeTextBox').value;

    img = '<img src="' + src + '"' + ' temp_src="' + src + '"' +  
        ( (alt != '') ? ' alt="' + alt + '"' : '' ) +  
        ( (title != '') ? ' title="' + title + '"' : '' ) +  
        ( (width != '') ? ' width="' + width + '"' : '' ) +  
        ( (height != '') ? ' height="' + height + '"' : '' ) +  
        ( (height != '') ? ' height="' + height + '"' : '' ) +  
        ( (align != '') ? ' align="' + align + '"' : '' ) +  
        ( (hspace != '') ? ' hspace="' + hspace + '"' : '' ) +  
        ( (vspace != '') ? ' vspace="' + vspace + '"' : '' ) +  
        ( (border != '') ? ' border="' + border + '"' : '' ) +  
        ' /> ';
        
    window.opener.FTB_API[ftb].InsertHtml(img);
    window.close(); // 这个是我加上去的，原始文件没有这行。
};

　　显然，ftb.imagegallery.aspx 会在用户点击 Insert 按钮之后生成图片的html代码，并调用指定的FTB的InsertHtml方法将代码传递过去。因此，只要为某一元素添加InsertHtml方法，并附加到 FTB_API 对象上，就可以接收和利用 ftb.imagegallery.aspx 返回的图片代码。

<asp:TextBox ID="oThumbnail" runat="server" Width="200px"></asp:TextBox>
<input id="Button1" type="button" value="..." onclick="pickThumbnail('<%= oThumbnail.ClientID %>');" />
<script type="text/javascript">
<!--
     function  pickThumbnail(src_id) {
        var o =  document.getElementById(src_id);
        if (o.InsertHtml ===  undefined) {
            o.InsertHtml = function (img) {
                //this.value = img;
                var div = document.createElement("DIV" );
                div.innerHTML =  img;
                //div.firstChild.src 取得图片的绝对网址。这里处理为绝对根路径。
                this.value = div.firstChild.src.substr((location.protocol+"//"+ location.host).length);
            }
            FTB_API[o.id] =  o;
        }
        // rif 代表图片文件夹的根目录，cif 代表当前目录
        var gallery = window.open("ftb.imagegallery.aspx?rif=~/images&cif=~/images&ftb="+o.id,'gallery','width=700,height=600,toolbars=0,resizable=1 ');
        gallery.focus();    
    }
// -->
</script>

以上代码在IE7.0及Firefox测试通过。点击下载打包的示例网站


PS: ftb.imagegallery.aspx 在点击Insert按钮后是不会自动关闭的。如果想点击此按钮后关闭该窗口。可以改用ExternalFile方式，然后打开 aspnet_client\FreeTextBox\FTB-ImageGallery.js 文件，在FTB_InsertImage函数的最后加上window.close()；我这里是第77行之后加入了这一句。