asp.net中使用FreeTextBox控件執行個體

   這兩天一直在學着如何使用FreeTextBox這個網頁文本編輯器。網上找了很多但是寫的也不是很詳細。下面我以FreeTextBox-3.1.6為例介紹如何使用這個控件，并且給出執行個體。

步驟一：解壓FreeTextBox-3.1.6隻要将FreeTextBox.dll、ftb.imagegallery.aspx和aspnet_client檔案夾拷貝到項目檔案夾中，和我們的test.aspx在相同的目錄下中，其中FreeTextBox.dll放到bin檔案夾下并且在VS2008中添加引用（其實FreeTextBox.dll不需要拷貝進項目檔案夾，隻需要"解決方案->右鍵->添加引用"後bin檔案夾中會自動産生FreeTextBox.dll）。

步驟三：往aspx檔案中添加控件FreeTestBox，并修改其屬性。修改後的控件屬性如下：

<FTB:FreeTextBox ID="Free1"    

      ImageGalleryPath="~/Images"     

      Language="zh-CN" runat="server"       

      ButtonDownImage="True"               

      toolbarlayout="ParagraphMenu,FontFacesMenu,FontSizesMenu,  

           FontForeColorsMenu,FontForeColorPicker,FontBackColorsMenu,  

           FontBackColorPicker|Bold,Italic, Underline,Strikethrough,Superscript,  

           Subscript,RemoveFormat|JustifyLeft,JustifyRight,   

           JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent;CreateLink,Unlink,        

           InsertImage|Cut,Copy,Paste,Delete;Undo,Redo,Print,Save|SymbolsMenu,StylesMenu,          

           InsertHtmlMenu|InsertRule,InsertDate,InsertTime|InsertTable,EditTable;InsertTableRowAfter,      

           InsertTableRowBefore,DeleteTableRow;InsertTableColumnAfter,InsertTableColumnBefore,  

           DeleteTableColumn|InsertForm,InsertTextBox,InsertTextArea,InsertRadioButton,  

           InsertCheckBox,InsertDropDownList,InsertButton|InsertDiv,EditStyle,InsertImageFromGallery,  

           Preview,SelectAll,WordClean,NetSpell" >       

 </FTB:FreeTextBox>  

步驟四：

在 ftb.imageegallery.aspx 中設定屬性

<FTB:ImageGallery id="ImageGallery1"         SupportFolder="~/aspnet_client/FreeTextBox/"  

        AllowImageDelete="true" AllowImageUpload="true"  

        AllowDirectoryCreate="true"  AllowDirectoryDelete="true" runat="Server" />  

這些屬性表示允許删除圖檔和上傳圖檔，允許建立檔案夾和删除檔案夾 。

完成以上這些，我們在test.aspx的設計視圖下，還是無法看到那些文本編輯器按鈕，隻能看到的是“FreeTextBox：Free1”這麼一個空白界面，原本我以為沒有操作成功，是以上面的步驟重複了好多次，但依舊是這樣，後來在浏覽器下打開發現原來操作已經成功了，前面做了很多無用功。呵呵。

在aspx檔案中再添加一個TestBox做文章的“标題”，一個按鈕Button“送出”。

test.aspx.cs:

protected void btnSubmit_Click(object sender, EventArgs e)  

{  

    string title = this.TextBox1.Text;  

    string content = this.Free1.Text;  

    NewsBus.AddNews(title,content);  

    //Response.Redirect("");  

    content = NewsBus.getLateNews().Tables[0].Rows[0][2].ToString();  

    Response.Write(content);//輸出最新插入的那條新聞的内容  

}  

appcode中NewsBus.cs：

public static bool AddNews(string title ,string content)  

  {  

      String strsql = "Insert into test(title,content) Values(@title,@content)";  

      SqlParameter[] paras = new SqlParameter[2];  

      paras[0] = new SqlParameter("@title", SqlDbType.VarChar);  

      paras[0].Value =title;  

      paras[1] = new SqlParameter("@content", SqlDbType.VarChar);  

      paras[1].Value =content;  

      if (NewsDB.Getcmd(strsql, paras))  

      {  

          return true;  

      }  

      return false;  

  }  

  public static DataSet getLateNews()  

      string strsql = "select top 1 * from test order by id desc";  

      return NewsDB.Getds(strsql);  

appcode中NewsDB.cs：

public static SqlConnection CreatCon()  

    string str=ConfigurationManager.AppSettings["conn"];  

    return new SqlConnection(str);  

blic static DataSet Getds(String strsql)  

    SqlConnection con=NewsDB.CreatCon();  

    DataSet ds= null;  

    try  

    {  

        SqlDataAdapter da = new SqlDataAdapter(strsql, con);  

        ds = new DataSet();  

        da.Fill(ds);  

    catch (Exception er)  

        throw er;  

    }  

    return ds;  

web.config

<configuration>  

<appSettings>  

     <add key="conn" value="Data Source=XUWEI/SQLEXPRESS;Initial Catalog=TestDatabase;User ID=dnndemo;Password=dnndemo" />  

  </appSettings>  

</configuration>  

最後在标題和内容欄中輸入文字，并且添加圖檔，點選“送出”以後會顯示剛輸入的内容。其中就包括圖檔。

其實原理很簡單，FreeTextBox在我們将内容欄中的文本輸入到資料庫的指定字段以後，會判斷我們有沒有插入圖檔，

如果有圖檔則将圖檔的位址也寫入“内容”字段中。

比如我們在FreetextBox的文本框中輸入文本：“内容欄，插入圖檔”，然後再插入一個叫做"pic.jpg"，"送出"完成以後我們去資料庫的表test中看字段content的内容如下：

<P>内容欄，插入圖檔</P>  

<P><IMG height=366 alt=未命名.jpg src="/testFTB3/Images/pic.jpg" mce_src="testFTB3/Images/pic.jpg" width=950 border=0></P>  

而在Images目錄下我們也能找到剛才插入的圖檔"pic.jpg"。這個是由

          ImageGalleryPath="~/Images"   ...  

</FTB:FreeTextBox>  

決定的。

本文轉自xwdreamer部落格園部落格，原文連結：http://www.cnblogs.com/xwdreamer/archive/2010/03/25/2297145.html，如需轉載請自行聯系原作者