步驟一：解壓FreeTextBox-3.1.6只要將FreeTextBox.dll、ftb.imagegallery.aspx和aspnet_client文件夾拷貝到項(xiàng)目文件夾中，和我們的test.aspx在相同的目錄下中，其中FreeTextBox.dll放到bin文件夾下并且在VS2008中添加引用（其實(shí)FreeTextBox.dll不需要拷貝進(jìn)項(xiàng)目文件夾，只需要"解決方案->右鍵->添加引用"后bin文件夾中會(huì)自動(dòng)產(chǎn)生FreeTextBox.dll）。
步驟二：將FreeTextBox做成空間添加到工具箱中，這在前一篇文章中寫過(guò)，點(diǎn)擊進(jìn)入查看。
步驟三：往aspx文件中添加控件FreeTestBox，并修改其屬性。修改后的控件屬性如下：
復(fù)制代碼 代碼如下:
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 中設(shè)置屬性
復(fù)制代碼 代碼如下:
FTB:ImageGallery id="ImageGallery1" SupportFolder="~/aspnet_client/FreeTextBox/"
AllowImageDelete="true" AllowImageUpload="true"
AllowDirectoryCreate="true" AllowDirectoryDelete="true" runat="Server" />
這些屬性表示允許刪除圖片和上傳圖片，允許創(chuàng)建文件夾和刪除文件夾 。
注意：
完成以上這些，我們?cè)趖est.aspx的設(shè)計(jì)視圖下，還是無(wú)法看到那些文本編輯器按鈕，只能看到的是“FreeTextBox：Free1”這么一個(gè)空白界面，原本我以為沒(méi)有操作成功，所以上面的步驟重復(fù)了好多次，但依舊是這樣，后來(lái)在瀏覽器下打開(kāi)發(fā)現(xiàn)原來(lái)操作已經(jīng)成功了，前面做了很多無(wú)用功。呵呵。
實(shí)例
在aspx文件中再添加一個(gè)TestBox做文章的“標(biāo)題”，一個(gè)按鈕Button“提交”。
test.aspx.cs:
復(fù)制代碼 代碼如下:
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);//輸出最新插入的那條新聞的內(nèi)容
}
appcode中NewsBus.cs：
復(fù)制代碼 代碼如下:
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：
復(fù)制代碼 代碼如下:
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
復(fù)制代碼 代碼如下:
configuration>
appSettings>
add key="conn" value="Data Source=XUWEI/SQLEXPRESS;Initial Catalog=TestDatabase;User ID=dnndemo;Password=dnndemo" />
/appSettings>
/configuration>
最后在標(biāo)題和內(nèi)容欄中輸入文字，并且添加圖片，點(diǎn)擊“提交”以后會(huì)顯示剛輸入的內(nèi)容。其中就包括圖片。
其實(shí)原理很簡(jiǎn)單，F(xiàn)reeTextBox在我們將內(nèi)容欄中的文本輸入到數(shù)據(jù)庫(kù)的指定字段以后，會(huì)判斷我們有沒(méi)有插入圖片，
如果有圖片則將圖片的地址也寫入“內(nèi)容”字段中。
比如我們?cè)贔reetextBox的文本框中輸入文本：“內(nèi)容欄，插入圖片”，然后再插入一個(gè)叫做"pic.jpg"，"提交"完成以后我們?nèi)?shù)據(jù)庫(kù)的表test中看字段content的內(nèi)容如下：
復(fù)制代碼 代碼如下:
P>內(nèi)容欄，插入圖片/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"。這個(gè)是由
復(fù)制代碼 代碼如下:
FTB:FreeTextBox ID="Free1"
ImageGalleryPath="~/Images" ...
/FTB:FreeTextBox>
您可能感興趣的文章:- FreeTextBox(版本3.1.6)在ASP.Net 2.0中使用方法
- asp.net FreeTextBox配置詳解
- 將FreeTextBox做成控件添加到工具箱中的具體操作方法
