如何接收ftb.imagegallery.aspx返回的圖片資訊

freetextbox 3.1.6 使用說明2008-10-14 11:44

如何開啟 Freetextbox 的 InsertFromGallery 功能 eWebEditor、WebHtmlEidtor   等許多線上編輯器預設都有一個功能，可以即時把圖片上傳到伺服器並插入到編輯器裡面，而在 Freetextbox 預設的“插入圖片”只能讓你插入一個圖片網址，如果你需要即時上傳圖片和對圖片進行設定的話，就要開啟強大的 InsertImageFromGallery 功能。雖然網上能搜到不少的相關文章，但基本上都是沒用的，估計可能是版本不同的原因，我下載的版本是3.1.6。 首先把下載好的 FTBv3-1-6.zip 解壓。然後對應 asp.net 的版本 FreeTextBox.dll 添加到 Visual Studio 的工具列裡面，如 asp.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 返回的圖片代碼。