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）。

步驟二：將FreeTextBox做成空間添加到工具箱中，這在前一篇部落格中寫道，點擊進入查看。

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

<FTB:FreeTextBox ID="Free1"<br /> ImageGalleryPath="~/Images"<br /> Language="zh-CN" runat="server"<br /> ButtonDownImage="True"<br /> toolbarlayout="ParagraphMenu,FontFacesMenu,FontSizesMenu,<br /> FontForeColorsMenu,FontForeColorPicker,FontBackColorsMenu,<br /> FontBackColorPicker|Bold,Italic, Underline,Strikethrough,Superscript,<br /> Subscript,RemoveFormat|JustifyLeft,JustifyRight,<br /> JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent;CreateLink,Unlink,<br /> InsertImage|Cut,Copy,Paste,Delete;Undo,Redo,Print,Save|SymbolsMenu,StylesMenu,<br /> InsertHtmlMenu|InsertRule,InsertDate,InsertTime|InsertTable,EditTable;InsertTableRowAfter,<br /> InsertTableRowBefore,DeleteTableRow;InsertTableColumnAfter,InsertTableColumnBefore,<br /> DeleteTableColumn|InsertForm,InsertTextBox,InsertTextArea,InsertRadioButton,<br /> InsertCheckBox,InsertDropDownList,InsertButton|InsertDiv,EditStyle,InsertImageFromGallery,<br /> Preview,SelectAll,WordClean,NetSpell" ><br /> </FTB:FreeTextBox>

步驟四：

在 ftb.imageegallery.aspx 中設定屬性

<FTB:ImageGallery id="ImageGallery1" SupportFolder="~/aspnet_client/FreeTextBox/"<br />AllowImageDelete="true" AllowImageUpload="true"<br />AllowDirectoryCreate="true" AllowDirectoryDelete="true" runat="Server" />

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

注意：

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

執行個體

在aspx檔案中再添加一個TestBox做文章的“標題”，一個按鈕Button“提交”。

test.aspx.cs:

protected void btnSubmit_Click(object sender, EventArgs e)<br /> {<br /> string title = this.TextBox1.Text;<br /> string content = this.Free1.Text;<br /> NewsBus.AddNews(title,content);<br /> //Response.Redirect("");<br /> content = NewsBus.getLateNews().Tables[0].Rows[0][2].ToString();<br /> Response.Write(content);//輸出最新插入的那條新聞的內容<br /> }

 

appcode中NewsBus.cs：

public static bool AddNews(string title ,string content)<br /> {<br /> String strsql = "Insert into test(title,content) Values(@title,@content)";<br /> SqlParameter[] paras = new SqlParameter[2];<br /> paras[0] = new SqlParameter("@title", SqlDbType.VarChar);<br /> paras[0].Value =title;</p><p> paras[1] = new SqlParameter("@content", SqlDbType.VarChar);<br /> paras[1].Value =content;</p><p> if (NewsDB.Getcmd(strsql, paras))<br /> {<br /> return true;<br /> }<br /> return false;<br /> }<br /> public static DataSet getLateNews()<br /> {<br /> string strsql = "select top 1 * from test order by id desc";<br /> return NewsDB.Getds(strsql);<br /> }

appcode中NewsDB.cs：

public static SqlConnection CreatCon()<br /> {<br /> string str=ConfigurationManager.AppSettings["conn"];<br /> return new SqlConnection(str);<br /> }<br /> public static DataSet Getds(String strsql)<br /> {<br /> SqlConnection con=NewsDB.CreatCon();<br /> DataSet ds= null;<br /> try<br /> {<br /> SqlDataAdapter da = new SqlDataAdapter(strsql, con);<br /> ds = new DataSet();<br /> da.Fill(ds);<br /> }<br /> catch (Exception er)<br /> {<br /> throw er;<br /> }<br /> return ds;<br /> }

web.config

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

 

最後在標題和內容欄中輸入文字，並且添加圖片，點擊“提交”以後會顯示剛輸入的內容。其中就包括圖片。

其實原理很簡單，FreeTextBox在我們將內容欄中的文本輸入到資料庫的指定欄位以後，會判斷我們有沒有插入圖片，

如果有圖片則將圖片的地址也寫入“內容”欄位中。

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

<P>內容欄，插入圖片</P><br /><P><IMG height=366 alt=未命名.jpg src="/testFTB3/Images/pic.jpg" mce_src="testFTB3/Images/pic.jpg" width=950 border=0></P><br />

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

<FTB:FreeTextBox ID="Free1"<br /> ImageGalleryPath="~/Images" ...<br /></FTB:FreeTextBox>

決定的。