How to Use FreeTextBox control in asp.net

Source: Internet
Author: User

Step 1:Unzip the FreeTextBox-3.1.6 as long as the FreeTextBox. dll, ftb. imagegallery. copy the aspx and aspnet_client folders to the project folder and test. aspx is in the same directory, where FreeTextBox. dll is put in the bin folder and added reference in VS2008 (in fact, FreeTextBox. dll does not need to be copied to the project folder. You only need to "solution-> right-click-> Add reference" and the bin folder will automatically generate FreeTextBox. dll ).

Step 2:Add FreeTextBox as a space to the toolbox, which was written in the previous article. Click here to view details.

Step 3:Add the control FreeTestBox to the aspx file and modify its attributes. The modified control attributes are as follows:
Copy codeThe Code is as follows:
<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>

Step 4:Set Properties in ftb. imageegallery. aspx
Copy codeThe Code is as follows:
<FTB: ImageGallery id = "ImageGallery1" SupportFolder = "~ /Aspnet_client/FreeTextBox /"
AllowImageDelete = "true" AllowImageUpload = "true"
AllowDirectoryCreate = "true" AllowDirectoryDelete = "true" runat = "Server"/>

These attributes allow you to delete images and upload images, create folders, and delete folders.

Note:
After completing the above steps, we will go to test. in the design view of aspx, you still cannot see the text editor buttons. You can only see the blank interface "FreeTextBox: Free1". I thought the operation was not successful, so the above steps have been repeated many times, but they are still like this. Later I opened them in a browser and found that the operation was successful. I did a lot of useless work before. Haha.

Instance
In the aspx file, add another TestBox Post "title" and a Button "Submit ".
Test. aspx. cs:
Copy codeThe Code is as follows:
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); // output the content of the newly inserted news
}

NewsBus. cs in appcode:
Copy codeThe Code is as follows:
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 );
}

NewsDB. cs in appcode:
Copy codeThe Code is as follows:
Public static SqlConnection CreatCon ()
{
String str = ConfigurationManager. receivettings ["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
Copy codeThe Code is as follows:
<Configuration>
<Deleetask>
<Add key = "conn" value = "Data Source = XUWEI/SQLEXPRESS; Initial Catalog = TestDatabase; User ID = dnndemo; Password = dnndemo"/>
</AppSettings>
</Configuration>

Finally, Enter text in the title and content bar, add an image, and click "Submit". The entered content is displayed. This includes images.

In fact, the principle is very simple. After we input the text in the content bar to a specified field in the database, FreeTextBox will judge whether we have inserted images,

If an image exists, the image address is also written into the "content" field.

For example, in the FreetextBox text box, enter the text "content bar, insert an image", and then insert a text file named "pic.jpg ", after "Submission" is complete, go to the database table test and check the content of the field as follows:
Copy codeThe Code is as follows:
<P> content bar, insert an image </P>
<P> </P>

In the Images directory, we can also find the inserted image "pic.jpg ". This is caused
Copy codeThe Code is as follows:
<FTB: FreeTextBox ID = "Free1"
ImageGalleryPath = "~ /Images "...
</FTB: FreeTextBox>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.