步驟一：解壓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"
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);
}
public 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"。這個是由
複製代碼 代碼如下:
<FTB:FreeTextBox ID="Free1"
ImageGalleryPath="~/Images" ...
</FTB:FreeTextBox>
