又一个不错的FCKeditor 2.2的安装、修改和调用方法

现在很多CMS系统因为安全原因会把后台编辑器里的上传功能给去除,但这样一来对实际使用过程造成了很多麻烦,今天我们以ASPCMS系统的FCKeditor编辑器为例,说明一下如何增加图片上传功能。

摘自:

忽然发现自己 Blog 的 FCKeditor 无法使用,好惊讶!居然看好的 PJBlog
也会有不行的时候。马上到网上查找,把一些主要的东西 Copy
了下来。以下是主要内容
FCKeditor的官方网站:www.fckeditor.com
和其他脚本类的程序一样,FCKeditor 的安装其实就是源代码的拷贝。
我们按照官方的方法,在网站根目录下建立 FCKeditor 这样一个文件夹,
然后把下载下来的文件包释放到该文件夹中。
只对一般的使用(ASP环境)进行配置和源文件的精简。
1、默认语言
打开fckconfig.js文件(相对FCKeditor文件夹,以下同),把自动检测语言改为不检测,把默认语言改为简体中文:

1. 打开网站后台编辑器里的admin/editor/fckconfig.js这个文件

测试过,很好使用

复制代码 代码如下:

找到FCKConfig.ImageUpload = false 这句,把false改成true就行啦。

fckeditor的官方网站去下载最新版本:

FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = ‘zh-cn’ ;

FCKConfig.ImageBrowser = false ; 这里也同样把false改成true

和其他脚本类的程序一样,fckeditor的安装其实就是源代码的拷贝。我们按照官方的方法,在网站根目录下建立fckeditor这样一个文件夹,然后把下载下来的文件包释放到该文件夹中。
安装好后,就是配置和使用了,我只对一般的使用(asp环境)进行了配置,源文件的精简,复杂应用不去管它。配置时需要改动几个文件,我们按功能来分,不按文件来分,这样读者更容易明白。

2、字体列表
打开fckconfig.js文件,在字体列表中添加常用的“宋体;黑体;隶书;楷体_GB2312”:

2.
看一下admin/editor/editor目录下面的filemanager文件夹是否存在,如果不在就去下载一个2.6.3版本以上的fck编辑器,把里面的filemanager文件夹复制过来。当然这里是ASP的,所以其他语言像PHP什么的文件夹可以删除。

1、默认语言
打开fckconfig.js文件(相对fckeditor文件夹,以下同),把自动检测语言改为不检测,把默认语言改为简体中文:

复制代码 代码如下:

3.
接下来设置文件上传的路径,打开admin/editor/filemanager/connectors/asp文件夹的config.asp这个文件进行如下设置

程序代码

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

ConfigIsEnabled = True 是否开启上传功能

fckconfig.autodetectlanguage = false ;
fckconfig.defaultlanguage  = ‘zh-cn’ ;

3、文件上传
FCKeditor
的文件管理程序在filemanager文件夹中,又分为浏览(browser)和上传(upload)两种。浏览是指浏览服务器文件并可以选择,也可以
上传本地文件至服务器;上传是指快速上传(QuickUpload),在窗口中点“上传”选项卡打开就是,跟我们使用的
UBB 编辑器有点相似,选择本地文件后上传就行。也就是说 FCKeditor
中有一个文件浏览,有两个文件上传,而这些设置有些在一个文件中,有的则在多个文件中。比较复杂,改动比较多,我们再分几个小点儿来说。
1)打开和关闭文件浏览和上传功能
有三个文件跟这个开关有关系,一个是 js
文件,两个是asp文件,前者关闭后界面中不出现相关窗口或按钮,后者关闭后相关功能不可用。首先是
fckconfig.js 文件,以下内容设为 true 为开,false 则为关。
文件浏览和浏览中上传功能:

ConfigUserFilesPath = “../../../../../uploads/”
文件上传目录,相对于该文件夹

2、字体列表
打开fckconfig.js文件,在字体列表中添加常用的“宋体;黑体;隶书;楷体_gb2312”:

复制代码 代码如下:

这里要重点指出的ConfigUserFilesPath =
“../../../../../uploads/”这里如果这样设置,我最后发现两个问题

程序代码

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

A. ConfigUserFilesPath =

fckconfig.fontnames  = ‘宋体;黑体;隶书;楷体_gb2312;arial;comic sans
ms;courier new;tahoma;times new roman;verdana’ ;

文件快速上传功能:

“../../../../../uploads/”这样设置虽然图片可以上传,但插入编辑器里的图片路径是有问题的,所以我试了很多次最后把它改成ConfigUserFilesPath

“/uploads/”就可以了。如果您的网站是放在下级文件夹里也可以这样设置ConfigUserFilesPath
= “文件夹名称/uploads/”。

B.
至于第二个问题,我感觉好奇怪,FCKeditor编辑器的图片路径会出现两个斜杠//,虽然图片也能显示,但看起来总归不舒服。请打开admin/editor/editor/
filemanager/connectors/asp文件夹里的,io.asp这个文件,请把:

function CombinePaths( sBasePath, sFolder)

CombinePaths = RemoveFromEnd(sBasePath, “/”) & “/” & RemoveFromStart(
sFolder, “/”)

end function

改成

function CombinePaths( sBasePath, sFolder)

sFolder = replace(sFolder, “”, “/”)

CombinePaths = RemoveFromEnd(sBasePath, “/”) & “/” & RemoveFromStart(
sFolder, “/”)

end function

4. 最后设置上传后的图片自动改名,请打开admin/editor/editor/
filemanager/connectors/asp文件夹里的commands.asp这个文件

在文件中添加如下语句

dim rannum

dim dtnow

dim getnewfilename

dtnow=now()

randomize

rannum=int(90*rnd)+10

getnewfilename=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

并将

sFileName = ouploader.file(“newfile”)name

改为

sFileName = getnewfilename &”.”&
split(ouploader.file(“newfile”).name,”.”)(1)

以上是关于ASPCMS网站系统的一点小小的改进,希望对有这方面需要的朋友有所帮助,今后我们还将关注该系统的其他问题。

3、文件上传
fckeditor的文件管理程序在filemanager文件夹中,又分为浏览
(browser)和上传(upload)两种。浏览是指浏览服务器文件并可以选择,也可以上传本地文件至服务器;上传是指快速上传
(quickupload),在窗口中点“上传”选项卡打开就是,跟我们使用的ubb编辑器有点相似,选择本地文件后上传就行。
也就是说fckeditor中有一个文件浏览,有两个文件上传,而这些设置有些在一个文件中,有的则在多个文件中。比较复杂,改动比较多,我们再分几个小点儿来说。

复制代码 代码如下:

①打开和关闭文件浏览和上传功能
有三个文件跟这个开关有关系,一个是js文件,两个是asp文件,前者关闭后界面中不出现相关窗口或按钮,后者关闭后相关功能不可用。
首先是fckconfig.js文件,以下内容设为true为开,false则为关。
文件浏览和浏览中上传功能:

FCKConfig.LinkUpload = true ;
澳门新葡亰平台官网 ,FCKConfig.ImageUpload = true ;
FCKConfig.FlashUpload = true ;

程序代码

其次设置两个 asp 文件:
editorfilemanagerbrowserdefaultconnectorsaspconfig.asp

fckconfig.linkbrowser = false ;
fckconfig.imagebrowser = false ;
fckconfig.flashbrowser = false ;

复制代码 代码如下:

文件快速上传功能:

ConfigIsEnabled = False

程序代码

表示文件浏览关闭
editorfilemanageruploadaspconfig.asp

fckconfig.linkupload = true ;
fckconfig.imageupload = true ;
fckconfig.flashupload = true ;

复制代码 代码如下:

其次设置两个asp文件:
editor”filemanager”browser”default”connectors”asp”config.asp

ConfigIsEnabled = True

程序代码

表示文件快速上传打开
2)文件上传或浏览的路径设置
注 意 FCKeditor
是不支持虚拟目录的,您的所有路径都是针对网站根目录的绝对路径,这点对于在本地测试用虚拟目录,发布到远程用网站目录的开发者不太方便。我的就是这
样,WinXP
系统只能一个站点,只有用虚拟目录表示不同的网站,在本地测试好了,上传前还要临时更改这个设置。
文件浏览路径,打开文件:
editorfilemanagerbrowserdefaultconnectorsaspconfig.asp

configisenabled = false

复制代码 代码如下:

表示文件浏览关闭

ConfigUserFilesPath = “/attachments/”

editor”filemanager”browser”default”connectors”asp”config.asp

快速上传的路径,打开文件:editorfilemanageruploadaspconfig.asp

程序代码
configisenabled = true

复制代码 代码如下:

表示文件快速上传打开

ConfigUserFilesPath = “/attachments/”

②文件上传
上传的路径设置:
打开文件editor”filemanager”browser”default”connectors”asp”config.asp:

我的文件目录在
如果在本地测试这个网站在虚拟目录xxx中,则应该设置为:

程序代码

复制代码 代码如下:

configuserfilespath = “/userfiles/”

ConfigUserFilesPath = “/xxx/attachments/”

我的文件目录在
如果在本地测试这个网站在虚拟目录test中,则应该设置为:

3)文件快速上传的一个源文件BUG
以上设置好后,文件浏览和浏览中上传可以顺利进行,但是你会发现“快速上传”不能用。现象就是当选择好本地文件后,点击“上传至服务器”的按钮后没有任何反应。这就是因为fckconfig.js文件中的一个bug所致。
打开fckconfig.js文件,把FCKConfig.QuickUploadLanguage字样的地方,替换成_QuickUploadLanguage,一共要替换三个地方。前者没有定义就使用,所以有错,按代码意图应该和后者的值一样的。
4)上传文件名自动更名
FCKeditor
不支持中文文件名称,所以我们要让文件存入服务器时更改名称。由于有两个上传的地方,而且所用文件不同,所以两个文件应该同时改,我们先来看看快速上传的
文件,打开:editorfilemanageruploadaspupload.asp,在文件最后添加以下函数:

程序代码
configuserfilespath = “/test/userfiles/”

复制代码 代码如下:

现在测试一下,点击“上传至服务器”的按钮后没有任何反应。这就是因为fckconfig.js文件中把默认语言”php”改成”asp”.

Public Function GetNewFileName()
dim ranNum
dim dtNow
dtNow=Now()
randomize
ranNum=int(90*rnd)+10
GetNewFileName=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

程序代码

我们用年月日时分秒和两位随机数字来作为文件名,这样既能够分辨出文件上传时间,也不容易重名。
然后仍然是这个文件,找到:

var _filebrowserlanguage    = ‘php’ ;    // asp | aspx | cfm | lasso |
perl | php | py
var _quickuploadlanguage    = ‘php’ ;    // asp | aspx | cfm | lasso |
perl | php | py

复制代码 代码如下:

④上传文件名自动更名
fckeditor不支持中文文件名称,所以我们要让文件存入服务器时更改名称。由
于有两个上传的地方,而且所用文件不同,所以两个文件应该同时改,我们先来看看快速上传的文件,打开editor”filemanager
“browser”default”connectors”asp”upload.asp,在文件最后添加以下函数:

‘ Get the uploaded file name.
sFileName = oUploader.File( “NewFile” ).Name

我是在fileupload sresourcetype, scurrentfolder,
scommand下面加的这个函数~

把它改为:

程序代码

复制代码 代码如下:

    public function getnewfilename()
     dim rannum
     dim dtnow
     dtnow=now()
     randomize
     rannum=int(90*rnd)+10
     getnewfilename=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 = GetNewFileName() &”.”& split(oUploader.File( “NewFile”
).Name,”.”)(1)

我们用年月日时分秒和两位随机数字来作为文件名,这样既能够分辨出文件上传时间,也不容易重名。

上面说的是快速上传的文件,而文件浏览中上传则是更改另外一个文件(editorfilemanagerbrowserdefaultconnectorsaspcommands.asp),其修改方法和上面那个文件一样:添加一个函数,修改一行代码。
4、在ASP源程序中引用FCKeditor编辑器
首先在asp页面顶端插入服务器端包含语句:

然后仍然是这个文件editor”filemanager”editor”filemanager”connectors”asp”commands.asp,找到:

复制代码 代码如下:

程序代码

<!–#include file=”FCKeditor/fckeditor.asp” –>

‘ get the uploaded file name.
sfilename    = ouploader.file( “newfile” ).name

然后在表单里面添加以下代码:

把它改为:

复制代码 代码如下:

程序代码

‘ 定义变量
Dim oFCKeditor
‘ 类的初始化
Set oFCKeditor = New FCKeditor
‘ 定义路径(默认路径:/FCKeditor/)
oFCKeditor.BasePath=”FCKeditor/”
‘ 定义工具条(默认为:Default)
oFCKeditor.ToolbarSet=”Basic”
‘ 定义宽度(默认宽度:100%)
oFCKeditor.Width=”100%”
‘ 定义高度(默认高度:200)
oFCKeditor.Height=350
‘ 输入框的初始值
oFCKeditor.Value=”这是示例文本。”
‘ 创建输入框名为:content
oFCKeditor.Create “content”

‘ get the uploaded file name.
sfilename   = getnewfilename() &”.”& split(ouploader.file( “newfile”
).name,”.”)(1)

这样就在表单里面创建了一个隐藏的名称为content的输入框,可以和其他表单元素一样使用,例如用以下代码取得该输入框的值:

最后一步:
在asp源程序中引用fckeditor编辑器
首先在asp页面顶端插入服务器端包含语句:

复制代码 代码如下:

程序代码
<!–#include file=”fckeditor/fckeditor.asp” –>

Dim content
content=CheckStr(Request.Form(“content”))

然后在表单里面添加以下代码:

以上用CheckStr对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。

还有一些存疑的地方:
1、文件上传路径问题比较费劲儿,看以后的版本又不有所改进。
2、LinkBrowser和LinkUpload没搞懂什么意思(UP2006-3-20:原来插入超级链接的时候,链接的目标文件也是可以上传的,而且这个文件格式默认只规定了不允许上传的格式。其实我们就可以利用这个功能上传RAR或DOC等等格式的文件)
插入超链接时,在官方的默认配置中只规定了禁止上传的格式,而不是像图片或Flash那样规定了允许上传的格式,这点要尤其注意,所以出现您所看到的可以上传“任意”类型的文件。按照配置文件:

复制代码 代码如下:

FCKConfig.LinkUploadDeniedExtensions =
“.(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$”
; // empty for no one

除了这些不允许,其它都是允许的。
关于去掉插入表单的选项,修改fckconfig.js的下面这一段就行了(注释Form那一行):

复制代码 代码如下:

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

程序代码

dim ofckeditor’ 定义变量
set ofckeditor = new fckeditor’ 类的初始化
ofckeditor.basepath    = “/fckeditor/”‘
定义路径(这是根路径:/fckeditor/)
ofckeditor.basepath=”fckeditor/”‘ 定义工具条(默认为:default)
ofckeditor.toolbarset=”basic”‘ 定义宽度(默认宽度:100%)
ofckeditor.width=”100%”‘ 定义高度(默认高度:200)
ofckeditor.height=350′ 输入框的初始值
ofckeditor.value=”这是示例文本。”
ofckeditor.create “fckeditor1”

这样就在表单里面创建了一个隐藏的名称为content的输入框,可以和其他表单元素一样使用,例如用以下代码取得该输入框的值:

程序代码

dim content
content=    checkstr(request.form(“fckeditor1”))

checkstr函数是自定义的一个函数,防止里面含有sql非法字符,这个自定义的函数在我博客里也有:

到此,你可以实现基本的功能了。当然fckeditor功能非常强大,这就要自己慢慢研究吧。`

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图