FckEditor组件的使用(新闻浏览发布页面)

时间:2023-02-09 08:48:35

FckEditor组件的使用

准备工作:

1)将FckEditor目录拷贝到网站根目录内。      

2)在Web.config的AppSetting分支中添加如下的代码,并修改FckEditor的目录和上传文件的保存目录(需要创建).

<appSettings>

<add key="FCKeditor:BasePath" value="~/fckeditor/"/>

<add key="FCKeditor:UserFilesPath" value="~/Upload/"/>

</appSettings>

3)将FredCK.FCKeditorV2.dll文件拷贝到网站的Bin目录内。

4)将FredCK.FCKeditorV2.dll文件内的控件添加到工具箱内

5)创建一个SQLHelper类与数据库交互。

6)创建一个新闻列表网页,目的是从数据库中读取新闻的概要信息,如标题、作者、时间等。将工具箱的Repeater控件放到设计页面,配置Repeater的数据源,

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<HeaderTemplate>//标签内的内容只出现一次
<table style=" width:100%;text-align:center;">
<tr>
<td style="text-align:left;">
新闻列表
</td>
<td>
添加时间
</td>
<td>
作者
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>//对应 DataSet 中的 "record" 重复出现

<tr>
<td style="text-align:left;">
<a href="article.aspx?id=<%# Eval("ID") %>" target="_blank"><%# Eval("Title")%></a>//根据数据库中ID号找到要打开的新闻
</td>
<td>
<%# Eval("PostTime")%>
</td>
<td>
<%# Eval("Poster")%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

FckEditor组件的使用(新闻浏览发布页面)

添加按钮代码:

protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("~/Default.aspx");//品红色部分是需要跳转到的页面名称
}

7)新建一个编辑新闻页面如图所示

FckEditor组件的使用(新闻浏览发布页面)

确认按钮代码:

protected void Button2_Click(object sender, EventArgs e)
{
DateTime time = DateTime.Now;
string column = this.DropDownList1.SelectedValue;
string title = this.TextBox1.Text;
string postTime = time.ToString();
string poster = this.TextBox2.Text;
string content = this.FCKeditor1.Value;//获取FCKeditor文本
if (FileUpload1.HasFile)
{
string path = Server.MapPath("~/upload/");
FileUpload1.PostedFile.SaveAs(path + FileUpload1.FileName);
SQLHelper myhelper = new SQLHelper(column, title, postTime, poster, content, FileUpload1.FileName);
myhelper.InsertintoSqlimage();
}
else
{
SQLHelper myhelper = new SQLHelper(column, title, postTime, poster, content, null);
myhelper.InsertintoSql();
}

8)新建一个浏览新闻页面,如图

FckEditor组件的使用(新闻浏览发布页面)

FckEditor组件的使用(新闻浏览发布页面)

9)效果图:

(1)新闻列表

FckEditor组件的使用(新闻浏览发布页面)

(2)新闻发布

FckEditor组件的使用(新闻浏览发布页面)

(3)新闻浏览

FckEditor组件的使用(新闻浏览发布页面)