zoukankan      html  css  js  c++  java
  • asp.net中ckeditor的使用

    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 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>");

    }

    Ok

  • 相关阅读:
    js正则表达式中的问号使用技巧总结
    380. Insert Delete GetRandom O(1)
    34. Find First and Last Position of Element in Sorted Array
    162. Find Peak Element
    220. Contains Duplicate III
    269. Alien Dictionary
    18. 4Sum
    15. 3Sum
    224. Basic Calculator
    227. Basic Calculator II
  • 原文地址:https://www.cnblogs.com/liaigang/p/1908497.html
Copyright © 2011-2022 走看看