1、版本问题:
  
当前采用的是FCKeditor2.6.3(其实已经很老了,当前最新版本已经到3.6.1)

2.FCKeditor下载:
  
http://ckeditor.com/download下载,下载两个压缩文件,分别是FCKeditor_2.6.3.zip 和FCKeditor.Net 2.6.3.zip。
  
FCKeditor_2.6.3.zip是FCKEditor的页面运行文件,FCKeditor.Net 2.6.3.zip是为ASP.NET环境制作的一个控件,其实只是需要其Bin文件夹中的一个dll文件。
3、在ASP.NET中使用:
  
解压下载的两个压缩包,将解压出来的fckeditor文件直接拷贝到站点的根目录下面,将.NET文件包中Bin—Debug—2.0下的dll文件拷贝到站点的Bin文件夹下,然后vs2005工具栏上面单击鼠标右键选择“选项卡……”在.NET Framework选项卡中点击“浏览”按钮选择到自己站点下面的dll文件,这样FCKeditor控件就显示在了我们的工具栏中,需要时直接将其拖至页面当中即可。
4、配置web.config文件:

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

5、修改fckeditor/fckconfig.js文件
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 

6、修改FCKeditor的配置文件(即fckconfig.js)自定义FCKeditor

A.工具栏上显示的功能配置 

 FCKConfig.ToolbarSets["Default"] = [
 ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
 ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
 ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
 ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
 '/',
 ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
 ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
 ['Link','Unlink','Anchor'],
 ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
 '/',
 ['Style','FontFormat','FontName','FontSize'],
 ['TextColor','BGColor'],
 ['FitWindow','ShowBlocks','-','About']  // No comma for the last row.
] ; 

以上是所有FCKeditor控件上的功能,其实根据它的中文意思我们就能够猜测出它的功能,还有一种简单的方法:上面“ '/'  ”表示一个换行,而我们FCKeditor在默认设置下就是现实三行,所以可以依次对照即可,比如第一个“Source”即对应工具栏上第一个按钮“源代码”等等,以此类推……直接删去自己不想要的功能即可。

B.字体配置:

默认情况下FCKeditor的字体很少,而且还没有中文字体,现在来添加一些字体

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

修改为:

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

字体可以随便添加   

C.配置换行键

默认情况下在FCKeditor中按Enter是另起一段Shift+Enter是换行,现在将他们调换过来

找到

FCKConfig.EnterMode = 'p' ;   // p | div | br
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br

修改为

FCKConfig.EnterMode = 'br' ;   
FCKConfig.ShiftEnterMode = 'p' ; 
    

D.配置表情图片

找到

FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth  = 320 ;
FCKConfig.SmileyWindowHeight = 210 ;

    说明:FCKConfig.SmileyPath 表示表情图片存放的路径

       FCKConfig.SmileyImages表示需要显示的表情图片名称

       FCKConfig.SmileyColumns 表示表情图片一行显示的图片个数

       后面两个一看就知道了,就是表情窗口的宽度和高度了

默认FCKeditor的表情是很少的,我们可以找到FCKConfig.BasePath + 'images/smiley/msn/',其中FCKConfig.BasePath即是指fckeditor/editor,找到后我们可以在images/smiley下面新建一个文件夹,然后将自己的表情图片全部放入里面,然后修改一个上面的FCKConfig.SmileyPath 和FCKConfig.SmileyImages即可

注意:如果图片过多,默认情况下FCKeditor会根据图片的多少来自动调整表情窗口的大小,而不会显示滚动条

首先,我们来设置不然表情窗体自动调整大小在fckeditor/editor/dialog下面有一个fck_smiley.html文件,我们将其打开,找到

window.onload = function ()
{
 // First of all, translate the dialog box texts
 oEditor.FCKLanguageManager.TranslatePage(document) ;

 dialog.SetAutoSize( true ) ;
}

将dialog.SetAutoSize( true ) ;注释掉即可。

    然后我们来设置当图片在固定宽度下图片过多,显示不了,而自动显示滚动条的效果

还是上面那个文件,找到

<body style="overflow: hidden">

overflow有四个值:visible    auto  hidden  scroll

在这里将overflow的值改为auto即可,也就是根据需要而现实滚动条。

E.语言配置

找到下面的配置行

FCKConfig.AutoDetectLanguage = true ;

FCKConfig.DefaultLanguage  = 'en' ;

将其改为(红字部分):

FCKConfig.AutoDetectLanguage = true ;

FCKConfig.DefaultLanguage  = 'zh-cn' ;

即采用简体中文作为缺省语言,第一行true表示自动检测语言,它会自动按浏览器的语言设定FCKEditor自己的显示语言的,所以即使第二行缺省语言在修改前是英语,但实际显示出来的仍然是中文,因为它检测出我的浏览器是中文的。

F.配置Tab键

默认 Tab 键在FCKeditor中不可用,找到配置行

FCKConfig.TabSpaces  = 0 ;

将其修改为(红字部分):

FCKConfig.TabSpaces  = 4 ;

也就是改成了,按一下 Tab 键,缩进4个格,和VS2005编辑器的缩进是一样的,如果你想改成其它的值,比如3,比如5等


7、自定义上传文件的名称

FCKeditor对文件名的处理规则是:如果当前目录下没有重名文件,则上传后的文件名与用户PC上的文件名一致;若存在n个重名文件,则加入用户PC上的文件名是Example.xxx,上传后的文件名变为:Example(n).xxx

我的项目里要求对用户上传的文件名变成Guid的格式,所以我对FCKeditor也做了扩展,在Web.config appSettings可以对上传后文件的格式自定义,如:

 
<add key="FCKeditor:FilenamePattern" value="%guid.%extl"/>


这样的文件名如:a299e63a-7d2d-493d-bbb9-99162ef5b6b8.gif

参考:

  • %guid    代表 一个新的guid字符串
  • %fnl    代表 源文件名的小写
  • %fnu    代表 源文件名的大写
  • %extl    代表 源文件扩展名的小写
  • %extu    代表 源文件扩展名的大写

8、配置FCkeditor的外观

在fckconfig.js中找到FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;

有三种外观样式供选择

分别为default   office2003   silver

选择一种然后修改即可,如:FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;

 

9、关于图片上传提示错误的问题:

    问题一:提示This connector is disabled

解决:

在fckeditor/editor/filemanager/connectors/aspx目录下面有一个 config.ascx 用户控件。打开它,我们可以看到有一个:
private bool CheckAuthentication()的方法。
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;
  }
默认是返回false的,返回true就可以了。不要轻易的返回true,要不然任何人都可以上传文件到你的服务器。可以在这里验证session的值来判断用户是否可以上传文件。
 
    问题二:FCKEditor 图片上传一直显示进度条的问题
解决:

很多博主介绍配置FCKeditor的目录时都是这样写的,我不知道是不是大家互相复制的关系

<appSettings>
    <add key="FCKeditor:BasePath" value="~/FCKeditor/"/>
    <!--FCKeditor基本文件目录-->
    <add key="FCKeditor:UserFilesPath" value="/UserFiles/"/>
    <!--文件上传目录-->
  </appSettings>

大家看一下上面两个配置有什么区别没有,"~/FCKeditor/"比"/UserFiles/"前面多了符号“~”。

在“/UserFiles/”前面加上“~”符号就可以了。

这个错误还会导致下面的问题:在单击浏览服务器按钮是提示:未能映射路径“/Files/image/”,具体提示如下:


The server didn't send back a proper XML response. Please contact your system administrator.

XML request error: Internal Server Error (500)

Requested URL:
http://localhost:7958/FCKeditorTest/FCKeditor/editor/filemanager/connectors/aspx/connector.aspx?Command=GetFoldersAndFiles&Type=Image&CurrentFolder=%2F&uuid=1224920141937

Response text:
<html>

    <head>

        <title>未能映射路径“/UserFiles/image/”。</title>

        <style>

         body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;}

         p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px}

         b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px}

         H1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red }

         H2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon }

         pre {font-family:"Lucida Console";font-size: .9em}

         .marker {font-weight: bold; color: black;text-decoration: none;}

         .version {color: gray;}

         .error {margin-bottom: 10px;}

         .expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; }

        </style>

    </head>

 …………

10、最后来给FCKeditor减肥   

因为FCKEditor是针对所有主流的WEB开发平台,又针对所有主要国家语言的软件,而我们现在只用它运行于中文(把英文也考虑进去吧),只运行于ASP.NET平台,所以我们把其它与此无关的内容删除。

首先,在 ~/fckeditor 目录下,把所有以“_”符号形状的目录及文件全部删除,这样在 ~/fckeditor 下只有一个 editor 目录;

其次,在 ~/fckeditor 目录下,只保留 fckconfig.js、fckeditor.asp、fckeditor.js、fckstyles.xml、fcktemplates.xml 这五个文件,其它一律删除。

接着,进入 ~/fckeditor/editor 目录,删除其中的 _source 目录;

进入 ~/fckeditor/editor/lang 目录,只留下 en.js, zh-cn.js 和 zh.js 这三个文件,其它文件全部删除,这些是工具栏语言文件,留下的三个分别是英语、简体汉字和繁体汉字。

进入 ~/fckeditor/editor/filemanager/connectors 目录,这里有支持各个开发平台的目录,只留下 aspx 目录,其它目录一概删除,注意留下那两个文件吧。

  至此,FCKeditor的配置就完成了。

修改fckeditor/fckconfig.js文件
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 

 posted on 2011-08-03 22:10  psforever  阅读(2482)  评论(0编辑  收藏  举报