关于fck

来源：互联网发布：世界银行数据编辑：程序博客网时间：2024/06/05 05:15

FCKeditor的官方网站是：http://www.fckeditor.net/download

1.下载FCKeditor.Net 和FCKeditor的压缩包，FCKeditor2.4.2.zip是其最新的Javascript文件和图片什么的；FCKeditor.NET.zip是ASP.NET调用的DLL在里面。

2.解压FCKeditor.NET.zip包后在FCKeditor.Net_2.2\bin\Debug目录里找到FredCK.FCKeditorV2.dll。其他文件没用，把FredCK.FCKeditorV2.dll复制到我们的网站，建立一个Bin目录。

3.引用FredCK.FCKeditorV2.dll。

4.配置WebConfig。

<?xml version="1.0"?>

<configuration>
<appSettings>

</appSettings>

说明：BasePath是fckeditor所在路径，fckeditor由于我们直接放网站目录下这样写就可以，如果您的网站多放几层适当调整即可。
UserFilesPath是所有上传的文件的所在目录。为什么要设置成/Files这样而不是~/Files，因为FCKeditor使用这个值来返回你上传后的文件的相对路径到客户端。否则的话客户访问的时候就会取客户的机器目录而不是http形式的目录。

建议：Files要单独做wwwroot目录下的一个站点比较好，和我们的站点FCKEditor平行。不要把它放FCKEditor里，为什么呢？因为Files是要让客户有写的权限的，如果放FCKEditor下很危险。

Files目录要有写的权限。你根据自己网站需求设置那个帐号，本文为方便设置User实际中你可能用ASP.NET帐号更合理。

前台代码：

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

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

<!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>FCKeditor文本编辑器</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fckeditorv2:fckeditor id="FCKeditor1" runat="server" DefaultLanguage="zh-cn" Height="400px" Width="660px"
></fckeditorv2:fckeditor>

    </div>
    </form>
</body>
</html>

怎么样获取结果呢？FCKeditor1.Value就是。

关于fck瘦身：

1、临时文件及文件夹删除：从根目录下开始删除一切以“_”开头的文件及文件夹，因为他们为临时文件和文件夹。删除这类临时文件及文件夹之后，我们还要删除一些根目录下的多余文件，根目录下我们只保留fckconfig.js（配置文件）、fckeditor.js（js方式调用文件）、 fckeditor.asp、 fckstyles.xml（样式）、fcktemplates.xml（模板）文件和editor文件夹。

2、editor/lang目录：存放的是多语言配置文件，因为我们只可能用到en和zh-cn（简体中文）所以，根据我的选择，我删掉其他的语言配置文件。

3、editor/skins界面目录：默认带有三个界面（default：默认界面，加载速度相对较快；office2003：相对pp的界面，不过速度确实要慢些；silver：银白色界面，加载速度也相对较快），可以自行决定是否删除其中一两个。

4、editor/filemanager/connectors目录：存放编辑器所支持的Web动态语言，我们以 Asp.net为例所以保留aspx目录，test.html文件可以帮助你查看某语言下的上传设置等（具体上传设置我将在后面的配置作较为详细讲解），可以自行决定是否删除。基本配置：

下面我开始对编辑器进行简单配置（并非每步都必须，可根据自己的需要参考修改）：

1、载入fckeditor的.net方法类库FCKeditor.Net_2.6.3.zip

解压FCKeditor.Net_2.6.3.zip，添加到项目中（载入后别忘了把工程名FredCK.FCKeditorV2.vs2005改为FredCK.FCKeditorV2），在主目录的bin文件夹中添加改引用！

2、默认语言

打开fckconfig.js文件（注意此文件是utf-8编码哦），找到FCKConfig.AutoDetectLanguage = true ;（第56行）此句作用为自动检测语言，默认为true，即表示编辑器会根据系统语言自动检测加载相应的语言，我们将其改为false，不让其检测，然后将FCKConfig.DefaultLanguage = 'en';（编辑器默认语言，第57行）改为简体中文"zh-cn"。

3、字体列表

依然打开fckconfig.js，因为此编辑器为外国人编写，所以默认不提供中文字体，我们为其加入，找到FCKConfig.FontNames（第142行）加入“宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;”其他字体可根据自己需要自行加入。

4、文件上传

FCKeditor的文件管理程序在editor/filemanager/文件夹下，分为浏览（browser）和上传（upload）两种。“浏览”是指浏览服务器已存在文件并可以选择，也可以上传本地文件至服务器；上传是指快速上传，在窗口中点“上传”选项，选择本地文件后上传就行，但是不能查看服务器上已有上传文件，相对而言不太方便，只是操作更为快捷。也就是说FCKeditor中有一个文件浏览，有两个文件上传，而这些设置是分散在多个文件中，配置相对复杂，下面我大致讲一下：

在FCKeditor中共有两个文件跟上传功能有关，一个是js文件，一个是aspx文件，前者关闭后界面中不出现相关窗口或按钮，后者关闭后相关功能不可用。

js文件即是指的fckconfig.js文件，在以前旧版本的fckconfig.js中首先你必需开启如下几项：

浏览上传功能：
CODE:

FCKConfig.LinkBrowser = true ; //文件

FCKConfig.ImageBrowser = true ; //图片

FCKConfig.FlashBrowser = true ; //Flash

快速上传功能：
CODE:

FCKConfig.LinkUpload = true ; //同上

FCKConfig.ImageUpload = true ; //同上

FCKConfig.FlashUpload = true ; //同上

即把这几项设为true，而我们今天使用的2.6.3的fckconfig.js中默认已经是开启上传开关显示功能的，所以，如果你要将该编辑器作为前台使用（fckeditor上传漏洞问题一直没有得到较好的改善），考虑到安全性你可能需要关闭文件上传功能，那么你只需要将这几项设置为false即可。

如果你要使用文件上传功能，那么我们继续配置：
依然在fckconfig.js文件中，fckeditor对语言默认支持的是php，找到以下两句，进行相应修改：
CODE:

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

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

我们将其均改为'aspx':
CODE:

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

var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php
*.AllowedExtensions：（其中*号代表：FCKConfig.LinkUpload、FCKConfig.ImageUpload 等）表示允许上传的文件后缀名，为空表示允许所有文件，你可根据自己需要设置上传文件后缀名，一定程度增加安全性，设置的格式可以参考它已有的后缀名设置。

*.DeniedExtensions：同上，表示禁止上传的文件后缀名。

注：你设置了允许上传的，当然禁止的也就不必要设置了，本人推荐设置允许的，毕竟禁止的后缀名列表不能罗列完全，可能还有很多我们不曾想到的后缀名。

对js文件的配置到此已经完成，下面我们进行aspx文件在上传方面的设置：

文件浏览上传修改：

打开editor/filemanager/browser/default/connectors/aspx/config.ascx文件，找到：

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 false;
}

将return false改为return true，即允许上传,最好在前面加上session判断用户登陆，以避免所有人都可以上传。

UserFilesPath= "/userfiles/" ;为定义上传目录，可根据自己情况进行修改，我将其改为upload目录。

注：注意FCKeditor是不支持虚拟目录的，你的所有路径都是针对网站根目录的绝对路径。

到此上传基本配置已经完成，整个编辑器最基本的配置也已经结束了

可能出现的错误：
FCKeditor出现"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;
} 可能出现的错误：
FCKeditor出现"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;
} 可能出现的错误：
FCKeditor出现"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;
} 可能出现的错误：
FCKeditor出现"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;
}

配置文件（fckconfig.js）中主要配置项目如下，根据自己看情况配置：

CODE:

FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件

FCKConfig.BaseHref = ''; // 相对链接的基地址

FCKConfig.Debug = true/false; // 是否开启调试功能，当调用FCKDebug.Output()时，会在调试窗中输出内容

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 设置皮肤

FCKConfig.AutoDetectLanguage = true/false ; // 是否自动检测语言

FCKConfig.DefaultLanguage = 'zh-cn' ; // 设置默认语言

FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默认文字方向，ltr左，rtr右

FCKConfig.FillEmptyBlocks = true/false ; // 使用这个功能，可以将空的块级元素用空格来替代

FCKConfig.FormatSource = true/false; // 切换到代码视图时，是否自动格式化代码

FCKConfig.FormatOutput = true/false; // 当输出内容时是否自动格式化代码

FCKConfig.FormatIndentator = ""; // 当在“源码格式”下缩进代码使用的字符

FCKConfig.GeckoUseSPAN = true/false; // 是否允许SPAN标记代替B，I，U标记

FCKConfig.StartupFocus = true/false; // 开启时是否FOCUS到编辑器

FCKConfig.ForcePasteAsPlainText = true/false;// 强制粘贴为纯文本

FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符号转换为XML实体

FCKConfig.TabSpaces = 0/1; // TAB是否有效

FCKConfig.TabSpaces = 4; // TAB键产生的空格字符数

FCKConfig.ShowBorders = true/false; // 是否合并边框

FCKConfig.ToolbarStartExpanded = true/false; // 页面载入时，工具栏是否展开，点“展开工具栏”时才出现

FCKConfig.ToolBarCanCollapse = true/false; // 是否允许展开折叠工具栏

FCKConfig.ToolbarSets = object ; // 编辑器的工具栏，可以自行定义，删减，可参考已存在工具栏

FCKConfig.EnterMode = 'p'; // 编辑器中直接回车，在代码中生成，可选为p | div | br

FCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift+回车，在代码中生成，可选为p | div | br

FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容

FCKConfig.FontColors = ""; // 文字颜色列表

FCKConfig.FontNames = ""; // 字体列表

FCKConfig.FontSizes = ""; // 字号列表

FCKConfig.FontFormats = ""; // 文字格式列表

FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置

FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置

FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器

FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址

FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路径

FCKConfig.SmileyImages = ''; // 表情文件名称列表，具体参考默认设置

FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数

FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度，此窗口会因为表情文件的改变而作调整

FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度，此窗口会因为表情文件的改变而作调整

FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件，还是仅允许编辑BODY间的内容

关于加上更改行距的选项

方法如下：
这里我采用的将编辑器中【样式】换成【行距】。
第一，在fckconfig.js里面

方法如下：
这里我采用的将编辑器中【样式】换成【行距】。
第一，在fckconfig.js里面
将
FCKConfig.CustomStyles =
{
'Red Title' : { Element : 'h3', Styles : { 'color' : 'Red' } }
};
替换成
FCKConfig.CustomStyles =
{
//mark090522
'12px' : { Element : 'span', Styles : {'line-height' : '12px' } },
'14px' : { Element : 'span', Styles : {'line-height' : '14px' } },
'18px' : { Element : 'span', Styles : {'line-height' : '18px' } },
'22px' : { Element : 'span', Styles : {'line-height' : '22px' } },
'26px' : { Element : 'span', Styles : {'line-height' : '26px' } },
'30px' : { Element : 'span', Styles : {'line-height' : '30px' } },
'36px' : { Element : 'span', Styles : {'line-height' : '36px' } },
'42px' : { Element : 'span', Styles : {'line-height' : '42px' } },
'50px' : { Element : 'span', Styles : {'line-height' : '50px' } },
'64px' : { Element : 'span', Styles : {'line-height' : '64px' } },
'80px' : { Element : 'span', Styles : {'line-height' : '80px' } }
//'Red Title' : { Element : 'h3', Styles : { 'color' : 'Red' } }
//markend
};
第二：在fckstyles.xml里
<Style name="Marker: Yellow" element="span">
<Style name="background-color" value="Yellow" />
</Style>
<Style name="Marker: Green" element="span">
<Style name="background-color" value="Lime" />
</Style>

<Style name="Language: RTL" element="span">
   <Attribute name="dir" value="rtl" />
</Style>
<Style name="Language: LTR" element="span">
   <Attribute name="dir" value="ltr" />
</Style>
<Style name="Language: RTL Strong" element="bdo">
   <Attribute name="dir" value="rtl" />
</Style>
<Style name="Language: LTR Strong" element="bdo">
   <Attribute name="dir" value="ltr" />
</Style>
将上面的代码注释掉
第三：在zh-cn.js
将Style     : "样式",替换成 Style     : "行距",