FCKeditor安装与在.NET中配置

最新推荐文章于 2024-06-27 10:00:05 发布

qbc0771

最新推荐文章于 2024-06-27 10:00:05 发布

阅读量1.4k

点赞数

文章标签： fckeditor .net upload 服务器 asp.net session

本文链接：https://blog.csdn.net/qbc0771/article/details/2691302

版权

FCKeditor安装与在.NET中配置

功能简介：

它可以让web程序拥有如MS Word这样强大的编辑功能，

FCKeditor 2.6.2 .zip是其最新的Javascript文件和图片等；

FCKeditor.NET_2.5.zip是一个ASP.NET控件DLL文件。

下面结合一个ASP.NET2.0的项目来具体看看FCKeditor的安装、配置、使用。在开始之前请先下载FCKeditor文件包和FCKeditor.Net 服务器控件。启用VWD2005新建一个C#的WEB Site工程，取名FCKPro。

FCKeditor安装：

所谓安装就是一个简单的拷贝过程。

1.把FCKeditor 2.6.2 .zip文件包直接解压缩到FCKPro的根目录下，这样根目录下就得到一个FCKeditor文件夹，里面富含所有FCKeditor的核心文件。

2.然后把FCKeditor.Net.zip解压, 把FCKeditor.Net_2.5/bin/Release/2.0目录中的FredCK.FCKeditorV2.dll文件拷贝到网站的根目录下新建的Bin文件夹中。

在VS2005中添加对FredCK.FCKeditorV2.dll的引用：

1.在FCKPro工程浏览器上右键，选择添加引用（Add Reference…），找到浏览(Browse)标签，然后定位到你解压好的FredCK.FCKeditorV2.dll，确认就可以了。这时，FCKPro工程目录下就多了一个bin文件夹，里面包含FredCK.FCKeditorV2.dll文件。当然，你也可以完全人工方式的来做，把FredCK.FCKeditorV2.dll直接拷贝到FCKPro/bin/下面，VS2005在编译时会自动把它编译进去的。

2.为了方便RAD开发，我们把FCKeditor控件也添加到VS的工具箱（Toolbox）上来，展开工具箱的常用标签组（General），右键选择组件（Choose Items…），在对话框上直接找到浏览按钮，定位FredCK.FCKeditorV2.dll，然后确认就可以了。这时工具箱呈现
这样会省去很多在开发时使用FCKeditor控件时要添加的声明代码。

至此，你已经完成了FCKeditor的安装，并可以在你的项目中使用FCKeditor了，当然后面还有很多需要配置的东西。

FCKeditor详细的设置：

进入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/' ;

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','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']

] ;

这是我改过的Basic，把图像功能去掉，把添加链接功能去掉，因为图像和链接和flash和图像按钮添加功能都能让前台页直接访问和上传文件，要是这儿不改直接给你上传个木马还不马上玩完？

当然也可以配置一下WebConfig,也能让它确保安全，接下来我们将讲到。

FCKPro工程项目的设置：

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

</appSettings>

设置了FCKeditor:BasePath后就不用再每次使用FCKeditor实例时指定BasePath属性了，FCKeditor:UserFilesPath则是制定我们所有上传的文件的所在目录。你也许会问为什么要设置成/FCKPro/Files这样而不是~/Files，因为FCKeditor使用这个值来返回你上传后的文件的相对路径到客户端，~/Files的形式是ASP.NET在服务可以编译解释的，但是在客户端的静态就不懂这是什么了。如果使用~/Files后，那么所有上传文件的返回路径都是~/Files形式的，你就会得到这样的链接http://~/Files/Image/logo.gif这样的链接解果就是路径为找到。所以才要我们上述那样设置，这是在开发阶段，如果在工程完成后发布时请记住把/FCKPro/Files改成/Files，道理不说大家也明白，开发阶段VS2005在运行项目时的URL是http://localhost/项目名称/的形式，发布后在Server上建立站点，跟路径就是http://www.abc.com/的形式了，所以发布后一定要改过来。这些地方是在使用FCKeditor2.2+ASP.NET2.0时经常发错误而又莫名其所云的地方。

2、在FCKpro工程项目中编写一个最简单的页面

<%@ Page Language="C#" AutoEventWireup="true" validateRequest="false" Debug="true" CodeFile="tianjia.aspx.cs" Inherits="ttys_tianjia" %>

<%@ 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 "-//W 3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

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

</FCKeditorV2:FCKeditor>

 </div>

</form>

</body>

</html>

如何获取其内容呢？

读取FCKeditor1控件的Value属性值即可。

结束语：现在的文本编辑器很多，FCKeditor算是一个比较难用的东东，还有个类似的控件FreeTextBox也很好用，不过它的最新版似乎收费了。

FCKeditor精简版的制作方法（附）。

　进入FCKeditor文件夹，把所有“_”开头的文件和文件夹删掉，这些都是一些范例，只保留editor文件夹、fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml就可以了；

　　进入editor文件夹，删掉“_source”文件夹，里面放的同样是源文件；

　　退回上一级目录进入filemanager文件夹，有browser和upload两个文件夹。进入browser/default/connectors，只保留aspx文件夹，其余的删掉；mcpuk目录亦可删除；upload也一样，只保留aspx文件夹；

　　退到editor再进入images文件夹，smiley里面放的是表情图标，有msn和fun两个系列，如果你想用自己的表情图标，可以把它们都删除；如果你想用这里的表情图标那就不要删了；

　　lang里面放的是语言包，如果只是用简体中文，那么只保留fcklanguagemanager.js、zh-cn.js两个文件就行了，建议也保留en.js（英文）、zh.js（繁体中文）两个文件，fcklanguagemanager.js是语言配置文件，有了它才能和fckconfig.js里的设置成对，对应上相应的语言文件，一定要保留！

　　再退出lang文件夹，进入skins文件夹，如果你想使用FCKeditor默认的奶黄色，那就把除了default文件夹外的另两个文件夹直接删除，如果想用别的，那就看你自己的喜好了。

至此，文件精简完毕，由原来的 2.55M 变成现在的797K了。接着修改设置

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

AutoDetectLanguage=true/false 自动检测语言
BaseHref="" 相对链接的基地址
ContentLangDirection="ltr/rtl" 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath="" 自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage="" 缺省语言
EditorAreaCss="" 编辑区的样式表文件
EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
EnableXHTML=true/false 是否允许使用XHTML取代HTML
FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代
FontColors="" 设置显示颜色拾取器时文字颜色列表
FontFormats="" 设置显示在文字格式列表中的命名
FontNames="" 字体列表中的字体名
FontSizes="" 字体大小中的字号列表
ForcePasteAsPlainText=true/false 强制粘贴为纯文本
ForceSimpleAmpersand=true/false 是否不把&符号转换为XML实体
FormatIndentator="" 当在源码格式下缩进代码使用的字符
FormatOutput=true/false 当输出内容时是否自动格式化代码
FormatSource=true/false 在切换到代码视图时是否自动格式化代码
FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记
IeSpellDownloadUrl=""下载拼写检查器的网址
ImageBrowser=true/false 是否允许浏览服务器功能
ImageBrowserURL="" 浏览服务器时运行的URL
ImageBrowserWindowHeight="" 图像浏览器窗口高度
ImageBrowserWindowWidth="" 图像浏览器窗口宽度
LinkBrowser=true/false 是否允许在插入链接时浏览服务器
LinkBrowserURL="" 插入链接时浏览服务器的URL
LinkBrowserWindowHeight=""链接目标浏览器窗口高度
LinkBrowserWindowWidth=""链接目标浏览器窗口宽度
Plugins=object 注册插件
PluginsPath="" 插件文件夹
ShowBorders=true/false 合并边框
SkinPath="" 皮肤文件夹位置
SmileyColumns=12 图符窗列数
SmileyImages=字符数组 图符窗中图片文件名数组
SmileyPath="" 图符文件夹路径
SmileyWindowHeight 图符窗口高度
SmileyWindowWidth 图符窗口宽度
SpellChecker="ieSpell/Spellerpages" 设置拼写检查器
StartupFocus=true/false 开启时FOCUS到编辑器
StylesXmlPath="" 设置定义CSS样式列表的XML文件的位置
TabSpaces=4 TAB键产生的空格字符数
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏
ToolbarSets=object 允许使用TOOLBAR集合
ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开
UseBROnCarriageReturn=true/false 当回车时是产生BR标记还是P或者DIV标记

上传图片设置:

1.fckeditor/editor/filemanager/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 true; 为真

}

public override void SetConfig()

{

// SECURITY: You must explicitly enable this "connector". (Set it to "true").

Enabled = CheckAuthentication();

// URL path to user files.

UserFilesPath = "~/UserFiles/"; UserFiles是存放文件的地方,在Web.Config的文档中哦拿可以统一赋值!

// The connector tries to resolve the above UserFilesPath automatically.

// Use the following setting it you prefer to explicitely specify the

// absolute path. Examples: 'C://MySite//userfiles//' or '/root/mysite/userfiles/'.

// Attention: The above 'UserFilesPath' URL must point to the same directory.

UserFilesAbsolutePath = "";

2.Web.Config

<add key="FCKeditor:BasePath" value="~/fckeditor/"/> fckeditor目录所在的地方

<add key="FCKeditor:UserFilesPath" value="~/UserFiles/" /> UserFiles是存放文件的地方

</appSettings>

第二部分，使用自己的表情图标，同样打开fckcofnig.js到最底部那一段

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 ;

第一行，当然是表情图标路径的设置，第二行是相关表情图标的文件名的一个集合，第三行是指弹出的表情添加窗口最每行的表情数，下面两个参数是弹出的模态窗口的宽和高喽。

第三部分，文件上传管理部分

此部分可能是大家最为关心的，上一篇文章简单的讲了如何修改来上传文件以及使用fckeidtor2.0才提供的快速上传功能。再我们继续再深层次的讲解上传功能

FCKConfig.LinkBrowser = true ;
FCKConfig.ImageBrowser = true ;
FCKConfig.FlashBrowser = true ;
在fckconfig.js 找到这三句，这三句不是连着的哦，只是我把他们集中到这儿来了，设置为true的意思就是允许使用fckeditor来浏览服务器端的文件图像以及 flash等，这个功能是你插入图片时弹出的窗口上那个“浏览服务器”按钮可以体现出来，如果你的编辑器只用来自己用或是只在后台管理用，这个功能无疑很好用，因为他让你很直观地对服务器的文件进行上传操作。但是如果你的系统要面向前台用户或是像blog这样的系统要用的话，这个安全隐患可就大了哦。于是我们把其一律设置为false;如下

FCKConfig.LinkBrowser = false ;
FCKConfig.ImageBrowser = false ;
FCKConfig.FlashBrowser = false ;

这样一来，我们就只有快速上传可用了啊，好！接下来就来修改，同样以asp为范例进行，进入/editor/filemanager/upload/asp/打开config.asp，修改

ConfigUserFilesPath = "/UserFiles/"
这个设置是上传文件的总目录，我这里就不动了，你想改自己改了

好，再打开此目录下的upload.asp文件，找到下面这一段

Dim resourceType
If ( Request.QueryString("Type") <> "" ) Then
resourceType = Request.QueryString("Type")
Else
resourceType = "File"
End If

然后再在其后面添加

ConfigUserFilesPath = ConfigUserFilesPath & resourceType &"/"& Year(Date()) &"/"& Month(Date()) &"/"

这样的话，上传的文件就进入“/userfiles/文件类型（如image或file或flash)/年/月/”这样的文件夹下了，这个设置对单用户来用已经足够了，如果你想给多用户系统用，那就这样来改

ConfigUserFilesPath = ConfigUserFilesPath & Session("username") & resourceType &"/"& Year(Date()) &"/"& Month(Date()) &"/"

这样上传的文件就进入“/userfiles/用户目录/文件类型/年/月/”下了，当然如果你不想这么安排也可以修改成别的，比如说用户目录再深一层等，这里的Session("username")请根据自己的需要进行修改或换掉。

上传的目录设置完了，但是上传程序还不会自己创建这些文件夹，如果不存在的话，上传不会成功的，那么我们就得根据上面的上传路径的要求进行递归来生成目录了。

找到这一段

Dim sServerDir
sServerDir = Server.MapPath( ConfigUserFilesPath )
If ( Right( sServerDir, 1 ) <> "/" ) Then
sServerDir = sServerDir & "/"
End If

把它下面的这两行

Dim oFSO
Set oFSO = Server.CreateObject( "Scripting.FileSystemObject" )

用下面这一段代码来替换

dim arrPath,strTmpPath,intRow
strTmpPath = ""
arrPath = Split(sServerDir, "/")
Dim oFSO
Set oFSO = Server.CreateObject( "Scripting.FileSystemObject" )
for intRow = 0 to Ubound(arrPath)
strTmpPath = strTmpPath & arrPath(intRow) & "/"
if oFSO.folderExists(strTmpPath)=false then
oFSO.CreateFolder(strTmpPath)
end if
next

用这段代码就可以生成你想要的文件夹了，在上传的时候自动生成。

好了，上传文件的修改到现在可以暂时告一段落了，但是，对于中文用户还存在这么个问题，就是fckeditor的文件上传默认是不改名的，同时还不支持中文文件名，这样一来是上传的文件会变成“.jpg”这样的无法读的文件，再就是会有重名文件，当然重名这点倒没什么，因为fckeditor会自动改名，会在文件名后加（1）这样来进行标识。但是，我们通常的习惯是让程序自动生成不重复的文件名

在刚才那一段代码的下面紧接着就是

' Get the uploaded file name.
sFileName = oUploader.File( "NewFile" ).Name

看清楚了，这个就是文件名啦，我们来把它改掉，当然得有个生成文件名的函数才行，改成下面这样

'//取得一个不重复的序号
Public Function GetNewID()
dim ranNum
dim dtNow
randomize
dtNow=Now()
ranNum=int(90000*rnd)+10000
GetNewID=year(dtNow) & right("0" & month(dtNow),2) & right("0" & day(dtNow),2) & right("0" & hour(dtNow),2) & right("0" & minute(dtNow),2) & right("0" & second(dtNow),2) & ranNum
End Function

' Get the uploaded file name.
sFileName = GetNewID() &"."& split(oUploader.File( "NewFile" ).Name,".")(1)

这样一来，上传的文件就自动改名生成如20050802122536365.jpg这样的文件名了，是由年月日时分秒以及三位随机数组成的文件名了。

限制上传的相关详细设置

如果网站需要显示引用其他网站的图片和flash时,必要要做一下处理了.

第一步,在FCKConfig.ToolbarSets["Basic"]中添加'Flash','Image'两个功能.

第二步,在editor文件夹中修改dialog目录下的fck_image/fck_image.js文件内容把tab,link和upload,advanced三个标签注释掉,弹出窗口的时候不再显示链接,上传和高级标签

if ( !bImageButton && !FCKConfig.ImageDlgHideLink )

//window.parent.AddTab( 'Link', FCKLang.DlgImgLinkTab ) ;

if ( FCKConfig.ImageUpload )

//window.parent.AddTab( 'Upload', FCKLang.DlgLnkUpload ) ;

if ( !FCKConfig.ImageDlgHideAdvanced )

//window.parent.AddTab( 'Advanced', FCKLang.DlgAdvancedTag ) ;

function OnDialogTabChange( tabCode ) { ShowE('divInfo' , ( tabCode == 'Info' ) ) ;

//ShowE('divLink' , ( tabCode == 'Link' ) ) ;

//ShowE('divUpload' , ( tabCode == 'Upload' ) ) ;

//ShowE('divAdvanced' , ( tabCode == 'Advanced' ) ) ; } 同样,flash修改方式和image相同. 接下来是编辑器位置的设置，我的习惯是把editor放在根目录下，最开始所述的五个文件也放在根目录下（Tips:建议放在根目录下，并且建议使用时设置路径也采用绝对路径，如"/fckeditor/"，而我的习惯的设置是"/"），这样有利于fckeditor的更新升级，并且网站下所有文件夹都可以任意调用，不存在其它文件夹名变了而其它地方就无法使用编辑器的问题。打开fckeditor.js文件，找到 this.BasePath = '/fckeditor/' ;改为 this.BasePath = '/' ; 编辑器域内默认的显示字体为12px，而我的主页默认字体为14px，所以看着就很不舒服，想要修改可以通过修改样式表来达到要求，打开/editor/css/fck_editorarea.css，把第4行改为 font-size: 14px;即可。

//FCKConfigFCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=ImageConnector=connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ;

//Type=Image 表示文件类型是image这会使文件浏览器定位到文件上传路径/image/文件夹下面

FCKConfig.LinkBrowser = false ;//是否在插入超连接功能中启用服务器文件浏览功能

FCKConfig.ImageBrowser = false ;//是否在插入图片功能里面启用服务器文件浏览功能

FCKConfig.FlashBrowser = false ;//是否在插入flash功能中启用服务器文件浏览功能

FCKConfig.LinkUpload = false ;//是否启用插入链接的快速上传功能

FCKConfig.ImageUpload = false ;//是否启用图片快速上传功能

FCKConfig.FlashUpload = false ;//是否启用flash上传功能

qbc0771

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
FCKeditor安装与在.NET中配置

FCKeditor安装与在.NET中配置功能简介：它可以让web程序拥有如MS Word这样强大的编辑功能， FCKeditor2.6.2.zip是其最新的Javascript文件和图片等；FCKeditor.NET_2.5.zip是一个ASP.NET控件DLL文件。下面结合一个ASP.NET2.0的项目来具体看看FCKeditor的安装、配置、使用。在开始之前请先下载F
复制链接

扫一扫