.Net中FckEditor的配置和使用方法(含示例源码)

    前些天,在项目中用到了在线编辑器,不知道用哪个好,在网上搜了一下,发现FckEditor是一个不错的组件。它有多国语言版,支持多个平台(Asp.Net,Asp,Php,Jsp等等)。但是这个组件下下了后,研究了好很一段时间才对它有了一个初步的认识,关于它网上有很多的文章,但是关于如何使用方面的例子却不多。
    所以我打算做这样一个例子,方便大家在用到这个组件的时候能马上上手。我们要用它,首先我们的手头要先有这个组件(下载FckEditor_2.5.1)。因为我学的是.Net,而且也越来越流行,所以我的例子以Asp.Net为主。要让FckEditor支持.Net还要下载FckEditor_Net。这个不是最新的版本,最新是FckEditor2.6,版本不同,但是用法是一样的。那个版本都是一样,在我的例子中我用的是FckEditor2.5的。让我们先来看看这个里面都有什么?fcdeditor文件夹里如下图:

    对于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.jsfckeditor.jsfckstyles.xmlfcktemplates.xml这五个文件,其它的都除掉。在Css里是这个组件用到的样式,我们可以不动它。Dialog里是一些弹出对话框不要动它,Dta也不要动。editor\filemanager\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。 

    到这里,总算是说完了。但是对于这个组件还是有一些问题的,在园子里也找了一下,没有得到解决。希望有高手指点一下:这个组件我还没有做到能上传Flash 和Media 。
    
   

   下载此示例源码:下载地址




    

posted @ 2008-03-09 20:25 JackLee 阅读(3361) 评论(20)  编辑 收藏 所属分类: C#&&.Net&&Asp.Net

  回复  引用  查看    
#1楼 2008-03-09 20:29 | .NET的春天      
这编辑器还行,不过这编辑器用在.net项目中是合适不过了
  回复  引用  查看    
#2楼 2008-03-09 20:52 | 菜菜灰      
讲讲怎么开发插件吧
  回复  引用  查看    
#3楼 [楼主]2008-03-09 21:15 | JackLee      
To 菜菜灰
我曾经试着在上面加一些插件,但是没的成功,因为这个上面全为JavaScript
我想我还得再好好的看看。过一段时间吧!!
  回复  引用    
#4楼 2008-03-09 21:28 | tmxkhd666 [未注册用户]
我看.NET中自带的一个编辑器还是很好的.
效果也不错啊.
用用看

  回复  引用  查看    
#5楼 2008-03-09 21:41 | 德仔--脚踏实地 用心努力      
这个组件我还没有做到能上传Flash 和Media



应该是配置有问题,绝对可以OK的.
  回复  引用  查看    
#6楼 [楼主]2008-03-09 21:59 | JackLee      
To 德仔--脚踏实地 用心努力
我说的是在Asp.Net中,你能我一个例子吗??
E-Mail:Chjw8016@163.com
  回复  引用  查看    
#7楼 2008-03-10 07:05 | 生鱼片      
.net中使用FreeTextBox应该是最好的吧
  回复  引用    
#8楼 2008-03-10 09:19 | gogogogo [未注册用户]
这个以前用在项目中过,不过个人还是比较喜欢FreeTextBox,可惜的是后来的版本不提供源码了。
  回复  引用  查看    
#9楼 2008-03-10 10:52 | Howard Queen      
很高兴看到开发人员的工作越来越简单了。
  回复  引用  查看    
#10楼 2008-03-10 11:05 | 黑羽飘舞      
这文章的确不适合放在首页,比较适合新手区。
  回复  引用  查看    
#11楼 2008-03-10 12:57 | beyoung      
@tmxkhd666
自带的?没注意过啊,哪位知道?
  回复  引用    
#12楼 2008-03-10 14:00 | slici [未注册用户]
真是我需要的
  回复  引用  查看    
#13楼 2008-03-10 20:26 | canbeing      
有没有关于fckeditor的安全性配置方面的,
都没有讲到自己编译“FredCK.FCKeditorV2.dll”
  回复  引用  查看    
#14楼 2008-03-10 21:54 | .NET的春天      
老兄,有错啊
看这,我下载下来就不能用,老的报错
""
错误 1 验证 (): 元素“html”出现的次数太少。 I:\Down\FckEditor\FckEditor\editor\filemanager\upload\aspx\upload.aspx 30 4 I:\Down\FckEditor\

"
错误 2 未能加载类型“FredCK.FCKeditorV2.Uploader”。 I:\Down\FckEditor\FckEditor\editor\filemanager\upload\aspx\upload.aspx 1

  回复  引用  查看    
#15楼 2008-03-11 09:04 | Vincent Yang      
--引用--------------------------------------------------
canbeing: 有没有关于fckeditor的安全性配置方面的,
都没有讲到自己编译“FredCK.FCKeditorV2.dll”
--------------------------------------------------------
源码都提供了,还用讲编译吗?自己看就可以了阿,我就是手动编译的,为了让upload图片的时候可以自动resize
  回复  引用  查看    
#16楼 2008-03-11 17:33 | 大力bober      
FredCK.FCKeditorV2.Uploader换成FredCK.FCKeditorV2.FileBrowser .Uploader
版本原因!
  回复  引用  查看    
#17楼 [楼主]2008-03-12 14:29 | JackLee      
--引用--------------------------------------------------
大力bober: FredCK.FCKeditorV2.Uploader换成FredCK.FCKeditorV2.FileBrowser .Uploader
版本原因!
--------------------------------------------------------
@大力bober
@.NET的春天
谢谢大力bober的回复,就是这个原因,我在CSDN的找过了!
  回复  引用  查看    
#18楼 [楼主]2008-03-12 14:32 | JackLee      
@tmxkhd666
什么组件呀,我没有见过,怎么用呀??
天空网站统计分析系统