Asp.net中FCKeditor2.6.3配置详解--谌俊

Asp.net中FCKeditor2.6.3配置详解　

刚好需要用到.net编辑器的时候，选择了传说中的FCKeditor好好的研究了一下！之前没有用过，遇到了一定的麻烦，现在拿出来和大家分享，希望对你也会有所帮助!

FCKeditor是个国外的多语言编辑器，你可以对其配置文件进行简单修改使之支持目前常用Web开发语言的应用，下面我就讲讲FCKeditor2.6.3版本在Asp.net中的具体配置过程，有不足和出错的地方，欢迎指正。

精简：

正因为这个编辑器是支持多语言的，所以首先我们针对使用对其做相应的冗余文件删除。

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，找到以下两句，进行相应修改：

我们将其均改为'aspx':

*.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是不支持虚拟目录的，你的所有路径都是针对网站根目录的绝对路径。

到此上传基本配置已经完成，整个编辑器最基本的配置也已经结束了，你可以通过下列代码对其进行调用测试了：

<%@ Page Language="C#" %>

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

<head>

<title>FCKeditor - Sample</title>

</head>

<body>

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

</FCKeditorV2:FCKeditor>

</form>

</body>

</html>

赶紧测试一下吧，是不是很激动，终于可以看到这个强大的编辑器了，呵呵。

我们可以为上传文件以时间+随机数作为其新名字，在FredCK.FCKeditorV2类中的FileBrowser下的FileWorkerBase.cs文件中修改protected void FileUpload( string resourceType, string currentFolder, bool isQuickUpload )方法中的sFileName处即可，可以自己写方法命名，我就不在这里献丑了！

当完成以上设置后，fckeditor已经能满足我们的日常使用需要，不过我们却又发现一个问题，那就是上传后的文件我们却无法删除，这样会使网站上的垃圾文件（主要是图片）日益增多，那我们是否能够通过对编辑器的修改能较为方便的管理删除无用上传文件呢？我们不难想到fckeditor的浏览文件功能，对该功能进行适当的扩展，对日常所上传的文件进行管理就变得相当简单易行了，那我们赶紧动手吧：

增加该功能我们修改的页面为：fckeditor\editor\filemanager\browser\default\frmresourceslist.html

第一步，在页面的body区域增加如下代码：

CODE:

　　<div id="showFile" style="float:left; display:none; background-color:#999999"></div>

<iframe id="iframe_del" name="iframe_del" width="0" height="0" scrolling="no"></iframe>

<div id="body_content"></div>

说明：第一对的作用是当我们把鼠标移动到所上传的文件上时显示其相关信息；<iframe></iframe>标签的作用是供我们删除上传文件时做动作响应窗口的，即是将我们的删除动作在iframe中运行，目的是实现伪无刷新删除效果；最后一对的作用是显示上传文件及文件夹的列表

第二步，在文件的js代码区中加入：

CODE:

// 显示文件显示层

function showDiv( fileUrl )

{

var name = fileUrl;

//获取文件类型

var suffix = name.substring(name.lastIndexOf(".")+1);

var div= document.getElementById("showFile");

div.content = "";

div.style.position = "absolute";

div.content += "<table width='256' border='0' cellpadding='3' cellspacing='1' bgcolor='#737357'><tbody><tr><td height='23' align='left' bgcolor='#C7C78F'><table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0'><tbody><tr><td width='47%'> <a href="/Blog/javascript:" onClick='hiddenDiv();'><font color='#000000' style='text-decoration:none;'>关闭</font></a></td> <td width='53%' align='right'><a href="/Blog/javascript:" onclick='delFile(\"" + fileUrl + "\");'><font color='#000000' style='text-decoration:none;'>删除</font></a> < /td></tr></tbody></table></td></tr>";

if (suffix=='gif' || suffix=="jpg" || suffix=="jpeg" || suffix=="bmp" || suffix=="png")

{

div.content += "<tr><td align='center' bgcolor='#C7C78F'><img src='" + fileUrl + "' onload='if(this.width>250) this.width=250' style='margin:3px;'></td></tr>";

}

else

{

div.content += "<tr><td height='35' align='center' bgcolor='#C7C78F'><strong>该类型不能预览</strong></td>< /tr>";

}

div.content += "</tbody></table>";

div.innerHTML = div.content;

div.style.display = "";

div.style.top = event.y+document.body.scrollTop+10;

div.style.left = event.x+document.body.scrollLeft+30;

}

// 隐藏文件显示层

function hiddenDiv()

{

var div= document.getElementById("showFile");

div.style.display ="none";

}

// 在iframe中删除文件

function delFile( fileUrl )

{

if(!confirm('你确定删除该文件？'))

return;

var url = '/fckeditor/del_file.aspx?filePath='+ fileUrl; //这里请自己建一个del-file.aspx

window.open(url, "iframe_del");

Refresh();

}

///*}}}*/

第三步，修改本页面原有js

修改：

CODE:

　　oListManager.Clear = function()

{

document.body.innerHTML = '' ;

}

为：

CODE:

　　oListManager.Clear = function()

{

hiddenDiv();

document.getElementById("body_content").innerHTML = '' ; // body_content为我们在body区域增加的div标签

}

找到：

CODE:

var sLink = '<a href="#" onclick="OpenFile(\'' + fileUrl.replace( /'/g, '\\\'') + '\');return false;">' ;

修改为：

CODE:

var sLink = '<a href="#" onmouseover="showDiv(\'' + fileUrl + '\');" onclick="OpenFile(\'' + fileUrl.replace( /'/g, '\\\'') + '\');return false;">' ; // 即是文件信息显示功能

修改：

CODE:

　　function Refresh()

{

LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;

}

为：

CODE:

　　function Refresh()

{

hiddenDiv(); // 所作修改，为了刷新列表时默认隐藏文件显示层

LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;

}

修改函数：GetFoldersAndFilesCallBack，找到：

CODE:

document.body.innerHTML = oHtml.ToString() ;

修改为：

CODE:

document.getElementById("body_content").innerHTML = oHtml.ToString() ;

最后，增加一个文件删除页面del_file.aspx（该文件路径和增加的js函数delFile(fileUrl)中的调用一致），作用为删除文件，给出成功与否的操作提示，参考代码：

protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["filePath"] != null)
        {
            if (Request.QueryString["filePath"].Trim() != "")
            {
                //BLF.Clean(Server.MapPath(Request.QueryString["filePath"].Trim().ToString()));
            }
        }
    }

/// <summary>
        /// 删除指定目录以及该目录下所有文件
        /// </summary>
        /// <param name="dir">欲删除文件或者目录的路径</param>
        public static void Clean(string dir)
        {

CleanFiles(dir);//第一次删除文件

CleanFiles(dir);//第二次删除目录

}
        private static void CleanFiles(string dir)
        {
            if (!Directory.Exists(dir))
            {
                File.Delete(dir);
                return;
            }
            else
            {
                string[] dirs = Directory.GetDirectories(dir);
                string[] files = Directory.GetFiles(dir);

                if (0 != dirs.Length)
                {
                    foreach (string subDir in dirs)
                    {
                        if (null == Directory.GetFiles(subDir))
                        {
                            Directory.Delete(subDir);
                            return;
                        }
                        else CleanFiles(subDir);
                    }
                }
                if (0 != files.Length)
                {
                    foreach (string file in files)
                    {
                        File.Delete(file);
                    }
                }
                else Directory.Delete(dir);
            }
        }

使用方法,一句话.Directory.Delete( path, true)

以上有人可能认为很烦,没有意义,不必用递归呢.几句代码就可以了.
但我想说,使用递归的好处就是,可以,在里面做判断,比如你只想删除其中的部分条件文件,你可以这样改一下..比如你只想删除名字等到.aaa.txt的.完全可以,

foreach ( string subDir in dirs )
                {
                   if ( null == Directory.GetFiles( subDir )   && subDir == "aaa.txt")
                    {
                         Directory.Delete( subDir );
                         return;
                    }
                    else CleanFiles ( subDir );
               }

当然我只是弄个简单例子,但希望有用.呵.

可以在fckconfig.js中找到FCKConfig.ToolbarSets["Default"]设置编辑器的工具栏，可以自行定义，删减

至此，我对于fckeditor的修改基本完成，当然这些修改只是对fckeditor修改使用的抛砖引玉，给大家一个参考，希望对初学者有所帮助。后面对编辑器的修改过程比较匆忙，并未修改一步完成一步文档书写，所以，难免有所出错，望见谅，如果你有什么问题和错误发现欢迎联系我互相讨论，共同进步，呵呵。

By chenjun @ 2008-11-13

Email: chenjun@jingzhengli.cn

另附：

配置文件（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间的内容

谌俊发表于 2008-11-13 15:39:39
[ 阅读全文 | 回复(0) | 编辑 ]

分享到：

上一篇：Request的ServerVariables集合列表
下一篇：数据库的五大范式

发表评论：