FCKEditor在.net安装,部署,应用

注:本文转自博客:http://hi.baidu.com/blueyund/blog/item/9ef3203fb9cda4eb55e723d9.html

版本:FCKeditor 2.4.3;
语言环境:多国语言;
特性功能:所见所得;支持平台众多;支持XHTML 1.0;文本格式设置;常见的编辑;复制、粘贴、撤销、文件上传等等功能;
授权方式:开源且免费;
官方地址:http://www.fckeditor.net/
下载地址:http://www.fckeditor.net/download/default.html
演示地址:http://www.fckeditor.net/demo/default.html


FCKeditor不仅加上了FLASH插入功能,而且它的兼容性超强:支持多种浏览器包括IE 5.5+、Firefox 1.0+、Mozilla 1.3、Netscape 7+;无平台限制,在Windows、Mac、Linux下都能运行;可以和多种WEB语言融合包括:ASP.Net、ASP、PHP、ColdFusion、Java、Perl;多语言支持自带47种语言包;开源且免费;最重要的是支持XHTML1.0标准。
  对于ASP网站,FCKeditor可以直接拿过来用了,不需要进行什么修改,因为FCKeditor默认就是ASP的。但有些设置并不适合自己使用,昨天对FCKeditor进行简单的修改,以便在ASP.NET网站的使用,仅供参考。

一、准备工作

  首先下载FCKeditor V2.4.3,下载地址:http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845;这个压缩包里并不包含ASP.NET要用到的DLL控件,所以还要下载另外一个压缩包,下载地址:http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=137125。把第一个文件解压到WEB根目录,默认文件夹名为:FCKeditor;再把第二个包解压,里面包含了源代码,如果你想自己再次开发,可以双击FredCK.FCKeditorV2.csproj文件,打开VS.NET进行修改,所用的语言是C#;不想修改的话,直接把bin\Release下面的FredCK.FCKeditorV2.DLL文件拷到WEB目录的bin下面。

二、精简文件

  因为只用到ASP.NET,所以有必要精简一下文件。
  进入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文件。
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
这行是设置皮肤的,如果精简时保留了silver,就把路径改成skins/silver,默认就不用管它了;
FCKConfig.DefaultLanguage = 'en' ;
设置默认语言,把en改成zh-cn,即简体中文;
FCKConfig.TabSpaces = 0;
如果在编辑过程中要用到TAB键,就把0改成1;

余下的代码都按照以上操作,删掉其它WEB语言,只保留ASP.NET。也可以点这里下载我精简过的文件,注意:只适用于ASP.NET,其他语言勿下!建议先解压到别的目录,再复制到WEB目录相对应的位置,以免造成文件丢失。
  改完后保存,FCKeditor已经完全支持ASP.NET了。当然还有一些安全问题,只要修改相应的toolbar,鼠标右键菜单等等,因为我的后台不面对前台用户的,即没有留言本和日记回复,所以略过这些步骤。下一步是打开VS.NET,在ASP.NET页面中加入FCKeditor。

四、ASP.NET中的应用

  打开项目的“资源管理器”,在引用中去掉“FreeTextBox”引用;添加“FredCK.FCKeditorV2”引用。
  打开添加文章、管理文章相对应的文件以修改其中的内容。下面以“添加文章”为例。切换到“HTML”界面,删掉原来FTB注册信息,添加FCK的引用,代码如下:

<%@ Register TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>

并确保@ Page中的“AutoEventWireup”“validateRequest”两个值都为false,不然当你发表的文章中含有链接或是其他HTML语句时,.NET会警告你有安全隐患而出错。在form的适当位置加入FCKeditor控件,当然form一定要有“runat="server"”,代码如下:

<FCKeditorV2:FCKeditor id="content" runat="server"></FCKeditorV2:FCKeditor>

id可以自己命名,自己喜欢易记就行。如果程序中有检测输入是否为空的话,那么就不再是content.Text了,而是content.Value。
  至此,文件修改完毕。所有代码如下:

引用
<%@ Page language="c#" Codebehind="AdminFileAdd.aspx.cs" AutoEventWireup="false" Inherits="MyBlog.Admin.AdminFileAdd" validateRequest=false%>
<%@ Register TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>AdminFileAdd</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<LINK href="/admin.css" type="text/css" rel="stylesheet">
</HEAD>
<body class="right">
<form id="Form1" method="post" runat="server">
<div>添加文章</div>
<div class="main">
<ul>
<li>
标题:<asp:textbox id="title" runat="server" MaxLength="50" Width="250px"></asp:textbox>
<li>
栏目:<asp:dropdownlist id="m" runat="server" AutoPostBack="True"></asp:dropdownlist>
<li>
<FCKeditorV2:FCKeditor id="content" runat="server"></FCKeditorV2:FCKeditor>
<li>
<asp:button id="add" runat="server" Text="提 交"></asp:button>
</li>
</ul>
</div>
</form>
</body>
</HTML>

 

在安装中遇到的几个小问题:

1、 修改上传文件的默认位置

FCKeditor中默认上传位置是/UserFiles/,怎样修改到自己的目录下呢?

可以修改在web.config中加上

<appSettings>

        <add key="FCKeditor:UserFilesPath" value="/<自己的目录>/<自己的子目录>/" />

</appSettings>

就可以了

2、 因为上传文件创建目录需要权限,别忘了修改适当的权限。

3、 有许多选项可以通过修改fckconfig.js中对应得参数实现,详细的可以参考文档。

  其它文件按照以上方法修改完毕之后,重新生成解决方案就大功告成了,接下来就慢慢感受FCKeditor带给你的震撼吧。还有一点要注意的是:如果你在用Windows XP SP2且启用了“弹出窗口阻止程序”,请把你的站点添加到“允许的站点”之中,不然插入图片或Flash时会提示脚本错误。


=====================================================================

FCKeditor相关资料简介:

官方网站http://www.fckeditor.net/

官方文档http://wiki.fckeditor.net/

下载地址http://www.fckeditor.net/download/default.html

官方演示http://www.fckeditor.net/demo/default.html

针对于ASP.NET开发者来说,你有两种选择:

1.        只使用FCKeditor,下载http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845,然后自行配置其中的几个核心js文件。对此发开不作为本文所讨论的范畴。

2.        使用FCKeditor.Net,下载http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=137125。需要声明的是,这个文件只是一个ASP.NET控件DLL文件,并不包括FCKeditor的编辑器内核。所以你还应该下载上一种方式中提到的文件包。

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

FCKeditor安装:

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

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

然后把下载的FCKeditor.Net_2.2.zip随便解压缩到你硬盘的一个空目录,里面是FCKeditor.Net的源代码(基于.NET1.1C#工程),你可以用VS2003来对它进行再度开发,本文尚不涉及本内容,我们只是直接使用FCKeditor.Net工程目录下的\bin\Release目录中的FredCK.FCKeditorV2.dll文件。

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了,当然后面还有很多需要配置的东西。

FCKeditorASP.NET2.0 Web项目中的配置:

现在,我开始来把FCKeditor应用在我们的项目中。打开Default.aspx,切换到设计模式(Design),把FCKeditor控件从工具箱上拖动下来,在Default页上你就可以看到这个FCKeditor了,不过这时只能看到一个FCKeditor的站位框,不会看到运行时的效果,鼠标选中FCKeditor1后,在属性(Property)面板上可以设置这个FCKeditor对象的一些基本属性。比较重要的是BasePath属性,如果先前FCKeditor就定在了根目录的FCKeditor下,就设置成~/FCKeditor/,如果是别的目录名就换成相应的值(注意:控件默认值是/FCKeditor/,因为我们使用的是服务器控件设置了runat="server"属性所以要显式的声明BasePath="~/FCKeditor/")。把Default.aspx切换到源代码模式(Source),我们可以看到IDE自动生成的代码:

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

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

如果当初没有把FCKeditor添加到工具箱上,那么应该在添加引用后自己手动来添加这些代码。

在源代码模式下,把鼠标点在FCKeditorV2:FCKeditor标签内容上,它会加粗显示,这时属性面板上显示出了FCKeditor服务器控件的全部属性,比在设计模式时多出了许多。

属性列表:

AutoDetectLanguage

BaseHref

BasePath

ContentLangDirection

CustomConfigurationsPath

Debug

DefaultLanguage

EditorAreaCSS

EnableSourceXHTML

EnableViewState

EnableXHTML

FillEmptyBlocks

FontColors

FontFormats

FontNames

FontSizes

ForcePasteAsPlainText

ForceSimpleAmpersand

FormatIndentator

FormatOutput

FormatSource

FullPage

GeckoUseSPAN

Height

ID

ImageBrowserURL

LinkBrowserURL

PluginsPath

runat

SkinPath

StartupFocus

StylesXMLPath

TabSpaces

ToolbarCanCollapse

ToolbarSet

ToolbarStartExpanded

UseBROnCarriageReturn

Value

Visible

Width

事件列表:

OnDataBinding

OnDisposed

OnInit

OnLoad

OnPreRender

OnUnload

以上属性和事件的使用在此不一一的赘述了,请先自行摸索一下,目前我也没找到相关资料,不过都不是很难,如果你有在asp下使用FCKeditor的经验,应该明白其中一些属性的意义,和fckconfig.js的设置项意义相同。以后有时间我会再把这部分整理好。需要说明的是FCKeditor2.2fckconfig.js和2.0版本的有了较大改进,体积更小,配置方式也更加灵活,具体请自行下载比较。

针对这个示例我配置的代码如下:

<FCKeditorV2:FCKeditor

    ID="FCKeditor1"

    runat="server"

    AutoDetectLanguage="false"

    DefaultLanguage="zh-cn"

    BasePath="~/FCKeditor/">

</FCKeditorV2:FCKeditor>

好,现在运行一下这个页面,允许修改Web.Config(这样IDE会自动在工程下添加一个Web.Config文件)。看到效果了吧!

有人会问:怎么得到一个HTTP Error 404 - Not Found.的错误呢?得到这个错误一般是BasePath没有设置正确,参看上述提到的BasePath注意事项仔细检查!

到了这里,FCKeditor的配置并没有真正的完成,因为它里面的一个强大功能我们还没正确配置:文件上传。

在Default.aspx的运行模式下,点FCKeditor的“插入/编辑图像”(又或者是Flash)功能,在弹出框点“浏览服务器”,又弹出一个对话框,此时随即出现的是一个错误提示框XML request error: Forbidden(403).

得到这样的错误有Web开发经验的都知道403应该是读写权限的问题。可是为什么呢?原因在于没有配置UserFiles路径。

我们在FCKPro根目录下,新建一个空目录Files。连同BasePath的设置通常的做法是这样的:

打开FCKPro工程的Web. Config文件,修改appSettings元素,配置如下:

<appSettings>

<add key="FCKeditor:BasePath" value="~/FCKeditor/"/>

<add key="FCKeditor:UserFilesPath" value="/FCKPro/Files" />

</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在运行项目时的URLhttp://localhost/项目名称/的形式,发布后在Server上建立站点,跟路径就是http://www.abc.com/的形式了,所以发布后一定要改过来。这些地方是在使用FCKeditor2.2+ASP.NET2.0时经常发错误而又莫名其所云的地方。

先不要高兴,这个上传的功能至此还差最关键的一步。在FCKeditor所在根目录下(FCKPro/FCKeditor/)找到fckconfig.js文件,用文本编辑器打开,在大概132行(大概是因为之前您也许参考其它资料更改过这个文件了)的地方找到:

var _FileBrowserLanguage    = 'asp' ;      // asp | aspx | cfm | lasso | perl | php | py

var _QuickUploadLanguage = 'asp' ;      // asp | aspx | cfm | lasso | php

把这两行赋值代码的值由asp改成aspx,保存关闭这个文件。

好了,大功告成了!在此运行FCKPro项目,使用浏览服务器功能,OK了吧?

再提一下:

对于开发中使用文件上传功能遇到 XML request error: Internal Server Error(500) 错误的解决办法。

遇到500内部错误是怎么回事呢?

因为ASP.NET2.0新增了Theme功能,所以如果在你的工程中你对Web.config使用到了styleSheetTheme或theme的话那就要再多修改一下。

还是到FCKeditor所在的目录,分别打开\editor\filemanager\upload\aspx\upload.aspx和\editor\filemanager\browser\default\connectors\aspx\connector.aspx两个aspx文件,在page标签中添加Theme=""或StyleSheetTheme=""看你在工程使用的是什么就修改什么。修改后如下:

<%@ Page language="c#" Inherits="FredCK.FCKeditorV2.Uploader" AutoEventWireup="false" Theme="" %>

<%@ Page language="c#" Inherits="FredCK.FCKeditorV2.Uploader" AutoEventWireup="false" StylesheetTheme="" %>

这样就解决了500的内部错误

 

FCKEditor v2.6 ASP.NET下的配置和使用

这个控件分成两个部分:一个是FCKEditor基础部分;一个是.Net控件部分。当前最新的版本为v2.6,可以到下面的地址下载:
需要注意的是:.Net 控件的运行时依赖于FCKEditor基础脚本的。
图片或文件上传:
关于图片的上传需要设定2个路径:一个是相对路径;一个是绝对路径。有两种方法,第一种是修改web.config的方法。第二种是直接修改config.ascx 文件( 文件位置:/fckeditor/editor/filemanager/connectors/aspx/目录下)。
1. 修改web.config,添加的内容如下:
一定需要注意的是,路径以"/"结尾,否则会出错。
2. 如果是修改config.ascx,可以打开config.ascx进行修改:
// URL path to user files.
UserFilesPath = "/userfiles/";
// 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 = "";
同时,FCKEditor针对image/flash/file/media上传类型,会各自添加相应的子目录:
TypeConfig[ "Flash" ].FilesPath                    = "%UserFilesPath%flash/";
……
TypeConfig[ "Media" ].FilesPath                    = "%UserFilesPath%media/";
你也可以进一步对上述code进行扩展,如针对不同的用户,自动建立对应的子目录,将用户的文件进行隔离和分开。示例代码如下:
string imagepath = "%UserFilesPath%" + m_userName + "/image/";
TypeConfig["Image"].FilesPath = imagepath;
TypeConfig["Image"].FilesAbsolutePath = (UserFilesAbsolutePath == "" ? "" : "%UserFilesAbsolutePath%image/");
TypeConfig["Image"].QuickUploadPath = imagepath;
TypeConfig["Image"].QuickUploadAbsolutePath = (UserFilesAbsolutePath == "" ? "" : "%UserFilesAbsolutePath%");
最后,还需要修改FCKEditor下面的fckconfig.js 配置文件:
找到:FCKConfig.DefaultLanguage ='en'   改为 FCKConfig.DefaultLanguage ='zh-cn'
找到:var _FileBrowserLanguage = 'php' 改为 var _FileBrowserLanguage = 'aspx'
找到:var _QuickUploadLanguage= 'php' 改为 var _QuickUploadLanguage = 'aspx'
FCKConfig.FontNames         = '宋体;黑体;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

 

作者:边写边唱

文章出处:http://www.cnblogs.com/zoupeiyang

专注于用自助终端技术实现互联网+,有兴趣朋友欢迎关注   捷思科技

posted on 2009-03-03 09:00  边写边唱  阅读(477)  评论(1编辑  收藏  举报

导航