ASP FCKeditor在线编辑器使用方法

本文使用的是最新的fckeditor 2.3.1版本
官方网站下载: [建议直接在官方网站下载最新版本]

下面就开始用了:

第一项工作就是对这个功能宏大的编辑器进行精简，当然是文件精简而非功能精简化。在这里我以asp版的fckeditor为例进行，进入到fckeditor 文件夹下，先把以“_”为开头的文件夹统统删除，这些文件夹里放的是范例或是一些其它工具。其实也就是只保留editor文件夹、fckconfig.js、fckeditor.asp、fckeditor.js、fckstyles.xml、fcktemplates.xml就可以了，最外层的精简化完毕，进入到editor文件夹内，先把“_source”文件夹删除，这里是一些源文件，对于使用来说没什么用处。

进入images文件夹，删除smiley文件夹，些文件是放表情图标的，你想用这里的表情图标那就不要删掉,想换自己的就删了吧,不过我觉得还是用自己的表情好,现在有很多有个性的图。退出 images再进入lang文件夹内，这里的东西可以来个大清洗了，fcklanguagemanager.js(最新版本没有这个文件)、zh-cn.js、en.js、zh.js这四个文件，第一个文件是语言配置文件，有了它才能和fckconfig.js里的设置成对对应上相应的语言文件,zh-cn.js是简体中文语言包,en.js是英语，zh.js是繁体中文的。

再退出lang文件夹，进入skin文件夹，default文件夹是默认的这种奶黄色.silver是银色的,也就是灰色和任何颜色配起来都不会难看，那个office2003的皮肤不是很好看,不建议使用,如果想换最简单的方法就是把喜欢的文件夹的东西拷到default文件夹下…

精简的最后一步，退出skin文件夹，再进入filemanager，如果你用的不是最新版的fckeditor的话，那这里就一个文件夹browser，新版的还有一个upload文件夹。先进入到filemanager/browser/default/connectors/下，除asp文件夹外(如果你的网页是其他的如php就留相应的php文件夹,类推)，全部删除。然后再进入filemanager/upload/下，同样，只留asp文件夹，至此，编辑器的精简化已经结束了，接下来，我们对编辑器进行设置修改。

第一个修改的文件，也就是fckeditor总配置文件，位于根目录下的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标记

如果你不知道从那下手,看看下面的流程可能对你有用:

找到 fckconfig.defaultlanguage = 'en' ;改为 fckconfig.defaultlanguage = 'zh-cn' ;设置默认语言为简体中文
找到fckconfig.tabspaces = 0 ; 改为fckconfig.tabspaces = 1 ; 即在编辑器域内可以使用tab键。

如果你的编辑器还用在网站前台的话，比如说用于留言本或是日记回复时，那就不得不考虑安全了，在前台千万不要使用default的toolbar，要么自定义一下功能，要么就用系统已经定义好的basic，也就是基本的toolbar，

fckconfig.toolbarsets[”basic”] = [
['bold','italic','-','orderedlist','unorderedlist','-',/*'link',*/'unlink','-','style','fontsize','textcolor','bgcolor','-','smiley','specialchar','replace','preview']
] ;

这是我改过的basic，把图像功能去掉，把添加链接功能去掉，因为图像和链接和flash和图像按钮添加功能都能让前台页直接访问和上传文件，要是这儿不改直接给你上传个木马还不马上玩完？但是光这样还不行，fckeditor还支持编辑域内的鼠标右键功能。

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' ;

接下来就设置上传功能了，还是以asp为例，其实fck默认的就是asp的，把100行以下的所有被注释掉的代码全部删掉就行，然后再把下面所有有关于browser.html和upload.asp的后面的?type=xx都改成type=yy，其中yy为你想保存文件的文件夹名称。

而如果你还想用自己的表情图标的话，那跳到131行，改掉那个表情图标的文件夹地址，以及下面的表情图标的文件名，再下面那三个数字是每行显示表情数及弹出窗口的宽和高了，这个的大小要根据您的表情图标排列的窗口的大小而定了。ok，总配置文件修改结束。

接下来是编辑器位置的设置，我的习惯是把editor放在根目录下，最开始所述的五个文件也放在根目录下（tips:建议放在根目录下，并且建议使用时设置路径也采用绝对路径，如”/fckeditor/”，而我的习惯的设置是”/”），这样有利于fckeditor的更新升级，并且网站下所有文件夹都可以任意调用，不存在其它文件夹名变了而其它地方就无法使用编辑器的问题。

打开fckeditor.asp文件，找到 sbasepath = ”/fckeditor/”改为 sbasepath = ”/”
打开fckeditor.js文件，找到 this.basepath = '/fckeditor/' ;改为 this.basepath = '/' ;

编辑器域内默认的显示字体为12px，而我的主页默认字体为14px，所以看着就很不舒服，想要修改可以通过修改样式表来达到要求，打开/editor/css/fck_editorarea.css，把第4行改为 font-size: 14px;即可。

接下来就是上传文件的设置了，这个比较麻烦，请仔细操作。

打开\editor\filemanager\browser\default\frmresourcetype.html，找到第15行，插入“ ['uploadfile','uploadfile'],”配合上刚才在fckconfig.js里的设置，那么我的上传文件路径就是/uploadfile，当然你也可以改成你想要的文件夹，但这里的名称一定要和fckconfig.js里的那个“type=yy”里的yy一致才行。

还没完，继续进入到editor\filemanager\browser\default\connectors\asp，打开config.asp，先把configisenabled = false改成为configisenabled = true，要不是没法上传文件的，再把configuserfilespath = ”/userfile”改成我想要的configuserfilespath = ”/”。
接着在“set configdeniedextensions = createobject( ”scripting.dictionary” )”后面加入
configallowedextensions.add ”uploadfile”, ””
configdeniedextensions.add ”uploadfile”, ””

同理，这里的设置也是要和上面以及fckconfig.js里面对应的。

还有一个上传，就是快速上传，这个功能是在fckeditor 2.0里才有的，以前的版本没这个功能。进入\editor\filemanager\upload\asp，同样打开config.asp，也同样的把configisenabled = false 设置成 configisenabled = true，我这里把configuserfilespath = ”/userfiles/”改成我想要的 configuserfilespath = ”/uploadfile/”& year(date()) &”-”& month(date()) &”/”，因为我的上传文件是放在uploadfile文件夹下，并且是按月分开放置的。快速上传，不会让你选择文件夹，而是通过这里的设置直接上传的，这儿设置如果和前面的设置配合不好的话，你的文件就会被上传得乱七八糟，很不方便管理。接前重复前一个config.asp里的操作，在后面加上

configallowedextensions.add ”uploadfile”, ””
configdeniedextensions.add ”uploadfile”, ””
接下来呢，就讲一下如何创建自己的在线编辑器，这里以asp为例：

测试环境：xpsp2，iis5.1，fckeditor2.0

在iis上建立一个新的站点，我直接取名为fckeditor
在dw里建立一个相对应的站点，测试服务器为本机，支持vbscript
在站点根目录下，新建一个index.asp页面，<body>段内加如下代码（调用编辑器）：

<%
dim ofckeditor
set ofckeditor = new fckeditor
ofckeditor.basepath = ”/fckeditor/” //设置编辑器的路径，我站点根目录下的一个目录
ofckeditor.toolbarset = ”default”
ofckeditor.width = ”100%”
ofckeditor.height = ”600″

ofckeditor.value = ”” //这个是给编辑器初始值
ofckeditor.create ”logbody” //以后编辑器里的内容都是由这个logbody取得，命名由你定

%>

加了这一段别忘了在index.asp前面第一行加上<!–#include file=”fckeditor/fckeditor.asp” –>把fckeditor.asp包含进来。

现在你只要把这个编辑器当成一个控件来使用，提取它的数据时用：request(”logbody”)

这里推荐一个实例，大家可以参考下修改到最新版本中