前些天,在项目中用到了在线编辑器,不知道用哪个好,在网上搜了一下,发现FckEditor是一个不错的组件。它有多国语言版,支持多个平台(Asp.Net,Asp,Php,Jsp等等)。但是这个组件下下了后,研究了好很一段时间才对它有了一个初步的认识,关于它网上有很多的文章,但是关于如何使用方面的例子却不多。
所以我打算做这样一个例子,方便大家在用到这个组件的时候能马上上手。我们要用它,首先我们的手头要先有这个组件(
下载FckEditor_2.5.1)。因为我学的是.Net,而且也越来越流行,所以我的例子以Asp.Net为主。要让FckEditor支持.Net还要下载
FckEditor_Net。这个不是最新的版本,最新是
FckEditor2.6,版本不同,但是用法是一样的。那个版本都是一样,在我的例子中我用的是FckEditor2.5的。让我们先来看看这个里面都有什么?
对于FckEditor_Net这个文件夹我们用到了里面Bin\Debug\2.0\FredCK.FCKeditorV2.dll。
如果你是.Net1.0的用户,则要用到Bin\Debug\1.0\FredCK.FCKeditorV2.dll。把这个DLL引用到你的网站根目录Bin 下面,再添加引用就行了。
对于FckEditor2.5.1,由于FckEditor是支持多语言、多平台的,
我们现在要用的是Asp.Net 所以我们只找出我们要用的东西,其它的我们可以除掉。
首先带“_”的文件和文件夹可以不要,它们是一些示例。
接下来我们继续给这
瘦身。在
fckeditor文件夹里我们只留下
editor、fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml这五个文件,其它的都除掉。在
Css里是这个组件用到的样式,我们可以不动它。
Dialog里是一些弹出对话框不要动它,
Dta也不要动。editor\file
manager\connectors下面我们只要Aspx这一个就够了。这里提供的是我们对上传文件的管理。Lang我们只要Zh-cn.js这个是简体中文,它里面就是所能支持的所有的语言。Js里面是这个组件的核心,我们更是不能动,Plugins里面是一些插件,我们不用去管它,在做例子中我们会用到这里面的上传图片插件,而不用它默认的上传功能。Skin里面有三个皮肤:Default、Office2003,Silver。瘦身到此结束,文件夹大小减小了不少的。最后把fckeditor文件夹Copy到你的网站根目录下面。一切搞定,接下来配一下Web.config和fckconfig.js,就能像我们常用的用户自定义控件一样的使用了。
在Web.config的AppSettings中添加
如果你用的是默认的上传功能,则
<add key="FCKeditor:BasePath" value="~/fckeditor/"/>
<add key="FCKeditor:UserFilesPath" value="/网站名称/UploadFiles/"/>
如果你用的是InsertImage插件,则
<add key ="UploadDir" value ="UploadFiles"/>
<add key ="HostName" value ="主机名称\主机IP\http://localhost"/> UploadFiles 是在你网站根目录下的,具有可写入的属性。其下有4个文件夹:image,flash,file,media。
在
fckconfig.js中找到
FCKConfig.DefaultLanguage=en,修改为zh-cn。接着把
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ;// asp | aspx | cfm | lasso | perl | php | py
修改为aspx。
下面就可以用这个组件了。
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
Default.aspx.cs
"
Inherits
=
"
_Default
"
%>
<%
@ Register Assembly
=
"
FredCK.FCKeditorV2
"
Namespace
=
"
FredCK.FCKeditorV2
"
TagPrefix
=
"
FCKeditorV2
"
%>
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head runat
=
"
server
"
>
<
title
>
三月软件工作室--测试页
</
title
>
</
head
>
<
body
>
<
form id
=
"
form1
"
runat
=
"
server
"
>
<
div
>
<
FCKeditorV2:FCKeditor id
=
"
OnLinkEditor
"
runat
=
"
server
"
></
FCKeditorV2:FCKeditor
>
</
div
>
</
form
>
</
body
>
</
html
>
这样你用的默认功能,用到的上传功能是可以浏览目录的,而且UploadFiles这个目录是可写的,这样对于服务器来说是很不安全的。如果你想自定义上传功能,并且有插入源代码的功能。那你就要接着往下看了。
打开fckconfig.js修改FCKConfig.ToolbarSets["Default"]的值如下:
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
'
],
[
'
JustifyLeft
'
,
'
JustifyCenter
'
,
'
JustifyRight
'
,
'
JustifyFull
'
],
[
'
Link
'
,
'
Unlink
'
,
'
Anchor
'
],
[
/*
'Image','Flash',
*/
'
InsertCode
'
,
'
InsertImage
'
,
'
Table
'
,
'
Rule
'
,
'
Smiley
'
,
'
SpecialChar
'
,
'
PageBreak
'
],
'
/
'
,
[
'
Style
'
,
'
FontFormat
'
,
'
FontName
'
,
'
FontSize
'
],
[
'
TextColor
'
,
'
BGColor
'
],
[
'
FitWindow
'
,
'
ShowBlocks
'
,
'
-
'
,
'
About
'
],
我们注释了原来的Image,Flash 等等,加入了InsertCode,InsertImage。这是我们想要的功能。接下来我们得注册这两个功能在文件的最后面这样加两句:
FCKConfig.Plugins.Add( 'insertcodecommands', null, FCKConfig.BasePath + 'plugins/' ) ;
FCKConfig.Plugins.Add( 'InsertImage', null, FCKConfig.BasePath + 'plugins/' ) ;
并将FCKConfig.LinkBrowser = true ;FCKConfig.ImageBrowser = true ;
FCKConfig.FlashBrowser = true ;的值修改为false。
到这里,总算是说完了。但是对于这个组件还是有一些问题的,在园子里也找了一下,没有得到解决。希望有高手指点一下:这个组件我还没有做到能上传Media