12.HTML编辑器（CKEditor、CKFinder集成）

CKEditor原名为FckEditor,是著名的HTML编辑器，可以在线编辑HTML内容。
配置参考文档：主要将ckeditor中的lang、plugins、skins、ckeditor.js、config.js、contents.css、styles.js解压后放到项目的目录下，在发贴页面引用ckeditor.js,然后设置多行文本框的class="ckeditor",代码中仍然可以通过TextBox控件的Text属性来访问编辑器的内容。
由于页面提交的时候asp.net会把富文本编辑器中的html内容当成攻击内容，因此需要在aspx中的Page标签中设置ValidateRequest="false"来禁用攻击检测，在2010中还要改动下配置文件（webconfig），要加入这样一句话 <httpRuntime requestValidationMode="2.0"/>。
CKFinder是一个CKEditor插件，用来为CKEditor提供文件的上传功能。将其bin\Release下的CKFinder.dll添加到项目的引用。将core,ckfinder.html,ckfinder.js,config.ascx解压到ckfinder自己的目录。按照文档修改ckeditor的config.js,将上传的处理程序设定为ckfinder,注意路径问题。
设置好上面的选项后，在插入超连接，插入图片、插入文件中都有上传的功能。
因为上传文件是非常危险的动作，因此在文件上传的时候会进行权限校验。在config.ascx的CheckAuthentication方法中检验是否有权限上传，返回true表示有权限，否则没有权限，一般修改成判断用户是否登录，并且登录用户是否有上传权限，可以用Session或Membership来做，在管理方面也可以指定IP地址的用户才能上传。
在Setconfig函数中设置上传文件夹的位置BaseUrl、缩略图的位置。每种类型数据的上传路径、允许上传的文件类型AllowedExtensions等。

以下为说明：

http://ckeditor.com

1.著名的html编辑器，把解压后的除了samples文件夹及js文件引用到项目中即可。
把ckeditor.js文件引入到头部文件中，并写个样式类名为.ckeditor即可，里面可以为空。
放入一个textbox控件，设定它的样式为ckeditor即可。
如果放入客户端texterar元素，只要设定它的col及row和样式为ckeditor也可。

2.要想用ckeditor中的文件上传功能，请到http://cksource.com/ckfinder/download中下载ckfinder.它和ckeditor配合才能完成
  解压ckfinder文件，在项目中引用bin/release中的CKFinder.dll文件。
  在项目中建立ckfinder文件夹，并把原来解压下的ckfinder文件夹中的core,ckfinder.html,ckfinder.js,config.ascx包含在项目中的ckfinder文件夹下。
  打开ckeditor文件夹下的config.js文件，在CKEDITOR.editorConfig函数下面加入以下信息：（*号里面的，conpath路径的问题，是相对于网站的）

*******************************************************************************************************************************
 var conpath = "/js";
    config.filebrowserBrowseUrl =conpath+ '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹
    config.filebrowserImageBrowseUrl =conpath+ '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹
    config.filebrowserFlashBrowseUrl =conpath+ '/ckfinder/ckfinder.html?Type=Flash';  //上传Flash时浏览服务文件夹
    config.filebrowserUploadUrl =conpath+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)
    config.filebrowserImageUploadUrl =conpath+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签)
    config.filebrowserFlashUploadUrl =conpath+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
*********************************************************************************************************************************

   在ckfinder文件夹下的config.ascx中可以看到CheckAuthentication()函数，这个函数主要是用来确认用户是否有权限上传文件的，一般用session来验证。
   在SetConfig（） 函数中根据BaseUrl和其它字段来设定上传的文件的目录地址。


   ckfinder在ie或chorm中有点问题，即向服务器传文件时会提示：文件名或文件夹名无效。
   可查看http://www.cnblogs.com/windfighter/archive/2013/05/13/3076628.html重新生成dll。即可。

实例：

建立工程目录：Js目录下有ckeditor 和ckfinder两个目录，把所要的CKEditor及CKFinder文件解压到其中，再建立Library文件夹，里面放入CKFinder.dll，并引用此dll. 按照上面的提示修改EKditor中的config.js文件路径，主要是让它集成ckfinder. 建立登录页面，只有登录的用户才有上传文件的权限。并修改ckfinder中的config.ascx，修改CheckAuthentication()函数来控制权限。

登录界面HTML：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="ckeditorpro.login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        
        <asp:Label ID="Label1" runat="server" Text="用户名："></asp:Label>
        <asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
        <br />
        <asp:Label ID="Label2" runat="server" Text="用户密码："></asp:Label>
        <asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="登录" />
        <asp:Label ID="Label3" runat="server" Visible="False"></asp:Label>
        
    </div>
    </form>
</body>
</html>

cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ckeditorpro
{
    public partial class login : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            if ((txtuser.Text == "admin") & (txtpwd.Text == "123456"))
            {
                Session["login"] = true;
                Response.Redirect("~/WebForm1.aspx");
            }
            else
            {
                Label3.Text = "登录失败";
                Label3.Visible = true;
            }
            
        }
    }
}

WebForm1.aspx页面ckeditor的HTML源码（记着要引用ckeditor.js文件并设定textbox的css）：

<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeBehind="WebForm1.aspx.cs" Inherits="ckeditorpro.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/ckeditor/ckeditor.js" type="text/javascript"></script>
   
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:TextBox ID="TextBox1" runat="server" Height="238px" CssClass="ckeditor" TextMode="MultiLine" 
            Width="208px"></asp:TextBox>
    
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
        <textarea id="tt" cols="50" rows="20" class="ckeditor"></textarea>
    </div>
    </form>
</body>
</html>

修改CkEditor中的config.js文件路径：

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    var conpath = "/js";
    config.filebrowserBrowseUrl =conpath+ '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹
    config.filebrowserImageBrowseUrl =conpath+ '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹
    config.filebrowserFlashBrowseUrl =conpath+ '/ckfinder/ckfinder.html?Type=Flash';  //上传Flash时浏览服务文件夹
    config.filebrowserUploadUrl =conpath+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)
    config.filebrowserImageUploadUrl =conpath+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签)
    config.filebrowserFlashUploadUrl =conpath+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

};

修改ckfinder下的config.ascx中的验证函数：

public override bool CheckAuthentication()
    {
        // WARNING : DO NOT simply return "true". By doing so, you are allowing
        // "anyone" to upload and list the files in your server. You must implement
        // some kind of session validation here. Even something very simple as...
        //
        //        return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
        //
        // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
        // user logs on your system.
        object obj=Session["login"];
        if ((obj != null) & ((bool)obj) == true)
        {
            return true;
        }
        return false;
    }

秒客网

12.HTML编辑器（CKEditor、CKFinder集成）

相关文章