【转载】CKeditor使用与配置

来源：互联网发布：菲律宾网络编辑：程序博客网时间：2024/05/17 07:24

首先介绍一下CKeditor的技术，其实CKeditor就是FCKeditor的升级版本，改名主要是与它公司的名字有关，这就是新出的版本Ckeditor3.0 官方网为：http://www.fckeditor.net/

develops Guide 这个开发指南相当不错，一般我们学一样东西都是直接去看这个技术的开发指南，里面有一般的用法，让你迅速上手，而且很容易搞懂这些配置。首先下载FCKeditor2.6.5.zip包，这个包是必须的，而且与语言无关。第二个必须包是FCKeditor.net_2.6.3.zip包。下载完这两个包，马上就可以开始web开发了。

当然首先你要看看Demo的东西，毕竟它是官方自带的例子，肯定值得我们去研究，而且里面的代码很有参考价值，到了这一步，我相信就很容易做了。

开发指南网址:http://docs.cksource.com/CKEditor_3.x/Developers_Guide

下面讲讲FCKeditor.Net编辑器在.net环境的配置方法。

第一步：解压缩FCKeditor_2.6.3.zip文件，并将解压缩得到的fckeditor文件夹复制到你想使用这个编辑器的网站的根目录下面。

第二步：把下载的FCKeditor.Net.zip随便解压缩到你硬盘的一个空目录，里面是FCKeditor.Net的源代码，可以对它进行再度开发，我这里讲直接应用，我们要使用到是其目录下的\bin\Debug目录中的FredCK.FCKeditorV2.dll文件。在你的网站里面把这个FredCK.FCKeditorV2.dll添加到bin目录下。

第三步：进入FCKeditor文件夹，编辑 fckconfig.js 文件，如下：

1、指定编辑器应用的编程环境，修改

var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py

var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php

改为

var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py

var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php

2、配置语言包。有英文、繁体中文等，这里我们使用简体中文。

修改

FCKConfig.DefaultLanguage = 'en' ;

为

FCKConfig.DefaultLanguage = 'zh-cn' ;

3、配置皮肤。有default、office2003、silver风格等，这里我们可以使用默认。

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;

4、在编辑器域内可以使用Tab键。（1为是，0为否）

FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ;

5、加上几种我们常用的字体的方法，例如：

修改

FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

为

FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'

6、编辑器域内默认的显示字体为12px，想要修改可以通过修改样式表来达到要求，打开/editor/css/fck_editorarea.css，修改font-size属性即可。如font-size: 14px;

7、关于安全性。

如果你的编辑器用在网站前台的话，那就不得不考虑安全了，在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，也就是基本的toolbar，

修改

FCKConfig.ToolbarSets["Basic"] = [

['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']

为

FCKConfig.ToolbarSets["Basic"] = [

['Bold','Italic','-','OrderedList','UnorderedList','-','Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']

] ;

第四步：在Web.Config文件里面添加，如下所示

1、配置WebConfig，在<appSettings>节点添加，如下所示：

如果你用的是默认的上传功能，则

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

<add key="FCKeditor:UserFilesPath" value="/网站名称/UploadFiles/"/>

第五步：在页面里应用FCKeditor编辑器

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" validateRequest="false" %>

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

// 这里要主要两个参数

// 默认为<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

// 我们要添加一个参数 validateRequest=false，否则提交带html代码的内容会报错

// 从客户端(...)中检测到有潜在危险的 Request.Form 值。

<!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>

<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server">

</FCKeditorV2:FCKeditor>

 </div>

</form>

</body>

</html>

如何获取其内容呢？读取FCKeditor1控件的Value属性值即可。

到这里基本OK了，但是我发现在使用图片上传功能的时候，会弹出一个阻止框，显示"this connector is disabled Please check the"editor/filemanager/connectors/aspx/config.aspx"，解决这个错误的方法是打开editor/filemanager/connectors/aspx/config.ascx修改CheckAuthentication()方法，返回true

C# code

private 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 in your system.

return true;

}

下载地址：http://www.fckeditor.net/download

FCKeditor使用

一、配置

1、在www.fckeditor.net点击Download，下载FCKEditor_2.5.1.zip和FCKEditor.Net(ASP.NET Control to easily integrate FCKEditor on .Net Web pages.)

2、新建一项目，比如叫FCK。解压FCKEditor_2.5.1.zip，里面有个fckeditor目录。把该目录整个复制到新建的ASP.NET项目根目录下。打开fckeditor目录下的fckconfig.js，修改二项：

FCKConfig.DefaultLanguage = 'en' ;

改为

FCKConfig.DefaultLanguage = 'zh-cn' ;

-----------------------------------------------------

var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py

var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py

改为

var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py

var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py

3、在vs05/08的工具箱上新建一个名叫FCKEditor的Tab，然后在里面点右键，选择Choose Item，定位到解压FCKEditor.Net后生成的FCKEditor2.51\FCKeditor.Net_2.5\bin\Release\2.0目录下的FredCK.FCKEditorV2.dll。该Tab下就会生成一个FCKEditor的.net组件。在vs的Design模式下把该组件拖放到界面上。点击该组件，在属性面板上设置BashPath为/FCK/fckeditor/，注意这里的FCK就是你建的ASP.NET的项目名称，fckeditor为项目根目录下的目录名称。（注意：/FCK/fckeditor/前后的斜杠，少了一个都不会显示编辑器的）。Ctrl+F5！

其它次要配置（不影响使用）：

* 可以把fckeditor目录及其子目录下所有下划下开头的范例、源文件删掉。

* 可以在fckeditor目录下只保留fckconfig.js、fckeditor.js和几个xml文件，其余全部删掉。

* fckeditor目录下的editor目录下有个filemanager目录，把该目录下的borswer\default\connectors目录中除aspx目录以外的全部目录删掉。

* 可以把editor\lang目录下除zh-cn.js、en.js、zh.js之外的全部删掉。

二、图片上传

FCKEditor支持图片上传。可以在ASP.NET项目根目录下添加一目录，起名为UploadFiles.

在web.config里的appSettings段里

<appSettings>

<add key="FCKEditor:BasePath" value="/FCK/fckeditor"/>

<add key="FCKeditor:UserFilesPath" value="/FCK/UploadFiles/" />

</appSettings>

注意UserFielsPath，这里设置的/FCK/UploadFiles/指定了要上传的目录。个人认为这里的FCK可以认为是服务器上的虚拟目录名。(另外发现如设为时不起作用)。

当上传图片时有可能遇到"this connector is disabled Please check the"editor/filemanager/connectors/aspx/config.aspx"的错误，这时可以更改fckeditor\editor\filemanager\connectors\aspx\config.ascx的CheckAuthentication()方法，返回true.

三、简单的FCKEditor存取数据库及显示

1、在项目里添加新项Sql Server Database, 文件名保留为Database.mdf。在里面新建一表MyTable,只有两个字段，一个int型自动增加的primary key, 另一个是text类型的MyContent. 我们要把FCKEditor1.Value值存到这个字段里。

2、先做个显示的页面。项目增加一个Show.aspx，拖一个SqlDataSource，设置一下返回MyTable的内容。再用Repeater显示。

//代码

<asp:Repeater ID="myRepeater" runat="server" DataSourceID="SqlDataSource1">

<HeaderTemplate>

<table>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td>

<%# Eval("MyContent") %>

</td>

</tr>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%nbsp;ConnectionStrings:ConnectionString %>"

SelectCommand="SELECT [OID], [MyContent] FROM [MyTable] ORDER BY [OID] DESC"></asp:SqlDataSource>

3、存入数据库

项目中引用System.Configuration（为了使用System.Web.WebConfigurationManager）

在FCKEditor界面上入一个按钮，然后

protected void Button1_Click(object sender, EventArgs e)

{

using (SqlConnection conn = new SqlConnection())

{

conn.ConnectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

SqlCommand cmd = new SqlCommand();

cmd.Connection = conn;

cmd.CommandText = "insert into MyTable(MyContent) values(@FCKContent)";

cmd.Parameters.AddWithValue("FCKContent",FCKeditor1.Value);

conn.Open();

cmd.ExecuteNonQuery();

}

}

原载地址：http://419443161-qq-com.iteye.com/blog/546858