write before the text.
yesterday evening ,I put all my heart in writting my blog, but only with a little fault---I forgot to save the article before I had uploaded the article.Then, something wrong had happened in the brower,I lost my composition when I clicked the upload button.I did not want to rewrite that, but I thought the technology was quite good, so I decided I should redo it .Becauce I can improve my wriiten-Enlish. Now let us begin with "what is FreeTextBox?".
1.what is FreeTextBox
FreeTextBox is the most-used HTML editor for ASP.NET. It is compatible with IE on the PC, and Mozilla and Firefox on all platforms. It is used in major Open Source projects such as community server and DotNetNuke as well as excellent packages like Smarter mail.
2.how to use FreeTextBox
the first,you can download the "FreeTextBox" from http://freetextbox.com/download/ ,then decompressing files .
the second, you must choice the"FreeTextBox.dll"and add it to the toolbox,and then you can draw it from the toolbox.
3.how to add the emotion button to the FreeTextBox
follow me,you will find them easy!
first,you can build a web project, named it "emotion_test". after that you must copy the aspnet_client folder
which in the decompressing files to the project root directory and build a new folder named "qq" in the project
root directory which used to fill with emotion pictures.
when you finish that, you can draw a FreeTextBox from toolbox to default.aspx. then jump to default.aspx.cs to coding.the source code is follow :
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
initTextBox();
}
public void initTextBox()
{
string myftb = "this.ftb";
string temp = "";
//QQface
ToolbarButton bu4 = new ToolbarButton("
插入
QQ
表情
", "
插入
QQ
表情
", "QQ");
temp = "window.showModalDialog('QQ.aspx'," + myftb +
",'status:no;dialogWidth:385px;dialogHeight:205px;edge:Raised; enter: no; help: No; resizable: No;')";
bu4.ScriptBlock = temp;
this.FreeTextBox1.Toolbars[1].Items.Add(bu4);
}
}
you should remember that:you must add the using FreeTextBoxControls; before your coding.
if you complete the stages above,you run the project,you can see the picture followed:
the third, if you come to here,we can focus on QQ emotion. you should add a new item "web window" and named it "QQ.aspx" to your project.draw a DataList control to QQ.aspx, you must notice that: the DataList control should be HTML .right clicked the DataList control and choose the property item. then find the repeatcolumns and alter it to 15. it means that: the QQ emotional pictures will ranged 15 in a row. then right clicked the DataList control and choose the "show intelligent mark" item. then you choose the edit template item and add a picture control to the DataList control then end the template edit. after do that, we can clicked the "design"button which at the left corner of the bottom then the page would jump to the design page. and you can alter the HTML code at here. the HTML code is followed:
function ReturnValue(imgId)
{
re= window.dialogArguments;
re.InsertHtml("<img src='ftbface/"+imgId+"' border=0>");
window.close();
}
this segment of javascript is add to the place between<head>and</head>.
then we also alter another places in the HTML code:
<div>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="15">
<ItemTemplate>
<div οnclick="ReturnValue('<%# "qq/" +Eval("Name") %>')"><img src='<%# "qq/" +Eval("Name") %>''/></div>
</ItemTemplate>
</asp:DataList></div>
the last,we coding in the QQ.aspx.cs:
public partial class QQ : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
BindList();
}
void BindList()
{
DirectoryInfo imagesfile = new DirectoryInfo(Server.MapPath(@"qq"));
DataList1.DataSource = imagesfile.GetFiles("*.gif");
DataList1.DataBind();
}
protected void dlstFace_ItemCommand(object source, DataListCommandEventArgs e)
{
Image imb = (Image)e.Item.FindControl("imgFace");
imb.Attributes.Add("OnClick", "ReturnValue(" + imb.ImageUrl + ")");
}
}
notice: you should add using System.IO; or you can not run your project correctly.if you do everything well, you can see the effect followed:
722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
