步驟一:解壓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
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:ImageGallery 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 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 mce_src="testFTB3/Images/pic.jpg" width=950 border=0></P>
復制代碼 代碼如下:
<FTB:FreeTextBox
ImageGalleryPath="~/Images" ...
</FTB:FreeTextBox>
新聞熱點
疑難解答
圖片精選