CKeditor在ASP.NET中的使用方法

1. 下载ckeditor放到网站目录下。地址:http: //ckeditor.com/
 引用js
 <script language="javascript" type="text/javascript" src='<%=ResolveUrl("~/ckeditor/ckeditor.js")%>'></script>
 3.添加一个编辑框
 <asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
 4.在下面添加如下代码
 代码如下:
 <script type="text/javascript">
 //<![CDATA[
 CKEDITOR.replace( '<%=mckeditor.ClientID %>',// mckeditor.ClientID为TextBox mckeditor生成的对应客户端看到的id
 {
 skin : 'office2003',//设置皮肤
 enterMode : Number( 2),//设置enter键的输入1.<p>2为<br/>3为<div>
 shiftEnterMode : Number( 1), // 设置shiftenter的输入
 });
 //]]>
 </script>
  
像上面这样就可以完成基本的功能了,但是有的时候我们要上传文件,cfeditor的文件功能是通过插件实现的,下面介绍文件插件的CKFinder的配置
 1. 到http://www.ckfinder.com/下载插件(主意选择asp.net版的),放到网站目录下
 2. 在之前的ckeditor配置信息后面添加如下代码
 代码如下:
 filebrowserBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html")%>',
 filebrowserImageBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Images")%>',
 filebrowserFlashBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Flash")%>',
 filebrowserUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files")%>',
 filebrowserImageUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images")%>',
 filebrowserFlashUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash")%>'
  
3. 修改config.ascx文件中的BaseUrl = "/uploads/"(文件上传目录) 和CheckAuthentication()上传身份验证。
 4. 排除示例文件夹中的fckeditor相关的文件,或者直接删除。(引用了fckeditor相关的命名空间)
 有fckeditor.aspx popup.aspx popups.aspx.三个文件
 之后应该使用就基本没问题了,但是如果项目中有几个地方都用到了编辑器,就要每个地方都写一段配置信息岂不是很麻烦,所以做了个简单的控件,代码如下:ascx文件
 代码如下:
 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="mpckeditor.ascx.cs" Inherits="mpckeditor" %>
 <script language="javascript" type="text/javascript" src='<%=ResolveUrl("~/ckeditor/ckeditor.js")%>'></script>
 <asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
 <script type="text/javascript">
 //<![CDATA[
 CKEDITOR.replace( '<%=mckeditor.ClientID %>',
 {
 skin : 'office2003',
 enterMode : Number( 2),
 shiftEnterMode : Number( 1),
 filebrowserBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html")%>',
 filebrowserImageBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Images")%>',
 filebrowserFlashBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Flash")%>',
 filebrowserUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files")%>',
 filebrowserImageUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images")%>',
 filebrowserFlashUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash")%>'
 });
 //]]>
 </script>
  
Cs文件:
 代码如下:
 using System;
 using System.Data;
 using System.Configuration;
 using System.Collections;
 using System.Web;
 using System.Web.Security;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 using System.Web.UI.WebControls.WebParts;
 using System.Web.UI.HtmlControls;
 public partial class mpckeditor : System.Web.UI.UserControl
 {
 public string value
 {
 set { mckeditor.Text = value; }
 get { return mckeditor.Text; }
 }
 protected void Page_Load(object sender, EventArgs e)
 {
 }
  
使用的地方只要把控件拖过来,后台代码页很简单Mpckeditor1.value就可以给它赋值或获取值
 代码如下:
 <uc1:mpckeditor id="Mpckeditor1" runat="server" value="疯子来测试"> </uc1:mpckeditor>
 protected void Button1_Click(object sender, EventArgs e)
 {
 Response.Write("<script language='javascript'>alert('" + HttpUtility.HtmlEncode(Mpckeditor1.value) + ";')</script>");
  
}

你可能感兴趣的:(server,fckeditor,Flash,Office,asp.net,textbox)