• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

asp.net中ckeditor的使用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

Fckeditor相信大家都知道。ckeditor是fckeditor的重写版,它的载入速度更快,界面更漂亮,更强的课定制性。试用了一下,下面介绍一下它在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文件

 

Code
<%@ 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文件:

 

Code
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 > </uc1:mpckeditor>

 

 

protected void Button1_Click(object sender, EventArgs e)

    {

        Response.Write("<script language='javascript'>alert('" + HttpUtility.HtmlEncode(Mpckeditor1.value) + ";')</script>");

}

 

 

Ok


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
[网络收集]asp.net文件路径问题发布时间:2022-07-10
下一篇:
【转】asp.netmvcwebapi+angular.js案例发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap