Step One: extract FreeTextBox-3.1.6 just copy the FreeTextBox.dll, ftb.imagegallery.aspx, and aspnet_client folders to the project folder. And our test.aspx in the same directory, where FreeTextBox.dll put in the Bin folder and add references in VS2008 (in fact, FreeTextBox.dll do not need to be copied into the project folder, only the solution-> right button- > Add Reference "Automatically generates FreeTextBox.dll in the Bin folder.)
Step Two: add the Freetextbox into the Toolbox, which was written in the previous article, and click into the view.
Step Three: Add the control Freetestbox to the ASPX file and modify its properties. The modified control properties are as follows:
Copy Code code 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 Four:Setting properties in Ftb.imageegallery.aspx
Copy Code code as follows:
<ftb:imagegallery id= "ImageGallery1" supportfolder= "~/aspnet_client/freetextbox/"
Allowimagedelete= "true" allowimageupload= "true"
Allowdirectorycreate= "true" allowdirectorydelete= "true" runat= "Server"/>
These properties allow you to delete pictures and upload pictures, allowing you to create folders and delete folders.
Attention:
Complete these, we in test.aspx Design view, still can't see those text Editor button, only see is "freetextbox:free1" such a blank interface, originally I thought no operation success, so the above steps repeated several times, but still is this, Later opened in the browser found that the original operation has been successful, the previous did a lot of hard work. Oh.
Instance
Add a Testbox "title" to the ASPX file and a button "submit".
Test.aspx.cs:
Copy Code code 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 contents of the latest inserted news
}
Appcode in NewsBus.cs:
Copy Code code 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);
}
Appcode in NewsDB.cs:
Copy Code code as follows:
public static SqlConnection Creatcon ()
{
String str=configurationmanager.appsettings["conn"];
return new SqlConnection (str);
}
public static DataSet Getds (String strSQL)
{
SqlConnection Con=newsdb.creatcon ();
The 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 Code code as follows:
<configuration>
<appSettings>
<add key= "conn" value= "Data source=xuwei/sqlexpress;initial catalog=testdatabase; User Id=dnndemo; Password=dnndemo "/>
</appSettings>
</configuration>
Finally enter the text in the title and content bar, and add a picture, click "Submit" will display the content just entered. These include pictures.
In fact, the principle is very simple, freetextbox after we have entered the text in the content bar to the specified field in the database, we will judge whether we have inserted the picture,
If you have a picture, the address of the picture is also written to the Content field.
For example, we enter text in the Freetextbox text box: "Content bar, insert Picture", and then insert a name called "Pic.jpg", after "submit" complete we go to the database table test to see the content of the field is as follows:
Copy Code code as follows:
<P> content bar, insert Picture </P>
<p></p>
And in the images directory we can also find the picture just inserted "pic.jpg". This is by
Copy Code code as follows:
<ftb:freetextbox id= "Free1"
Imagegallerypath= "~/images" ...
</FTB:FreeTextBox>
