FCKeditor2.1.1在ASP.NET中的设置和使用(转）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

FCKeditorWeb在线编辑器说明

现在网络上有很多不一样的web在线编辑器，大多数都是商业程序，要使用更多功能的话得掏钱。比如FreeTextbox，CuteEditor（听说它非常强大）。

我选择了FckEditor，主要它是轻量级的，功能丰富的，安装使用简单的，开源的在线编辑器，而且开源，下载的包里有项目文件，你可以按照自己的需要进行修改代码，然后再次生成组件。而且它支持IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+和Netscape 7+以上浏览器，并且支持ASP，CGI，PHP，ASP.NET，Java，ColdFusion，Python等脚本。

好了，闲话不说，我这里提一下在ASP.NET下一般的安装和使用方法。

1、下载FckEditor 2.3 Beta，它主要包括核心文件。

2、下载FckEditor 2.2 .Net ，包括ASP.NET的DLL文件，并且解压到任意目录。

22、解压FckEditor 2.3 Beta压缩包，将文件夹FCKeditor复制到网站的根目录，这里以ASP.NET 2.0的test项目为例，将其复制到test的根目录，并且在根目录下新建uploads目录用来存放编辑器上传得文件。

4、打开FCKeditor目录下的fckconfig.js文件，将FCKConfig.DefaultLanguage的值改为zh-cn使其的界面语言改变为简体中文，_FileBrowserLanguage和_QuickUploadLanguage的值都改为aspx。可选的修改如下，可以修改编辑器的skin,将FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' 的default可以该为office2003或者silver。保存修改，关闭文件。

5、打开test项目的web.config文件，在<appSettings>节点下增加<add key="FCKeditor:UserFilesPath" value="/Weblog/uploads"/>。不知道为什么FCKeditor不支持相对路径，如果设置为“~/uploads”就是用不了，上传得文件地址都变成"http://localhost/~/uploads/xxxxxx.jpg"这样的了。在<system.web>节点下增加<pages validateRequest="false"/>，要不然当在编辑器里输入字符保存时，会出现“检测到有潜在危险对象的Request.form值”的警告，好了，保存文件。

6、在项目中引用刚才解压的FCKeditor.NET压缩包里的FredCK.FCKeditorV2.dll文件。具体位置是 FCKeditor.Net_2.2/bin/release/FredCK.FCKeditorV2.dll

7、打开test项目的default.aspx页面，在

程序代码
<%@ Page Language="C#" MasterPageFile="~/Weblog.master" AutoEventWireup="true" CodeFile="article.aspx.cs" Inherits="article" Title="Test FckEditor" %>

下面加入以下代码

程序代码
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

然后就可以在default.aspx页面使用这个控件了：

程序代码
<fckeditorv2:fckeditor ></fckeditorv2:fckeditor>

8、如何取得编辑器中的文本。该控件有个属性是value，它就是获得编辑器中的文本的。

9、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

10、其他
官方网站的support上提到，如果使用asp.net 2.0和theme，那么需要打开\editor\filemanager\upload\aspx\upload.aspx和\editor\filemanager\browser\default\connectors\aspx\connector.aspx文件，并且在第一行中加入Theme="" 。比如

程序代码
<%@ Page language="c#" Inherits="FredCK.FCKeditorV2.FileBrowserConnector" AutoEventWireup="false" Theme="" %>

FCKeditor 2.1.1在ASP.NET中的设置和使用(ZT)

FCKEditor用法

　昨天抛弃了FreeTextBox1.6中文版，改用FCKeditor 2.1.1。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.1.1，下载地址：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；
　　因为FCKeditor默认是ASP的，所以要把它换成ASP.NET。把ASP跟其它被注释掉的代码删掉，用ASP.NET来代替。例如：FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/asp/connector.asp' ;
//FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/asp/connector.asp&ServerPath=/CustomFiles/' ;
// ASP.Net  // FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/aspx/connector.aspx' ;
// ColdFusion // FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/cfm/connector.cfm' ;
// Perl   // FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/perl/connector.cgi' ;
// PHP   // FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/php/connector.php' ;
// PHP - mcpuk // FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/mcpuk/browser.html?Connector=connectors/php/connector.php' ;

只保留：

FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/aspx/connector.aspx' ;

余下的代码都按照以上操作，删掉其它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 ></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 >
<div>添加文章</div>
<div class="main">
<ul>
<li>
标题：<asp:textbox ></asp:textbox>
<li>
栏目：<asp:dropdownlist ></asp:dropdownlist>
<li>
<FCKeditorV2:FCKeditor ></FCKeditorV2:FCKeditor>
<li>
<asp:button ></asp:button>
</li>
</ul>
</div>
</form>
</body>
</HTML>

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

在ASP.Net中使用FCKeditor

翻译：linqingfeng

It is very easy to use FCKeditor in your ASP.Net web pages. Just follow these steps.

[按着下面的步骤你将会很容易的把FCKeditor运用到ASP.Net的页面中。]

You must have downloaded and installed (copied it in your web site) the last version of FCKeditor editor before proceeding with these steps. The FCKeditor.Net package doesn't include the core of the editor (JavaScript scripts to be placed in the /FCKeditor/ directory of your site). You can download it from the following URL:
[在这之前，你必须下载和安装（或复制）FCKeditor的最新版本到你的网站中。FCKeditor.Net程序包并不包含编辑器的核心（JavaScript脚本放置在你的站点中的/FCKeditor/文件夹下面）。你可以从以下网址下载到它：]

[[BR]] http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845

Step 1
[步骤1]

Suppose that the editor is installed in the /FCKeditor/ path of your web site. Now you need to download the FCKeditor ASP.Net Control DLL to use in your pages. You can find the last version here:
[假如编辑器的安装路径是在你站点的/FCKeditor/目录下。你还需要下载FCKeditor ASP.Net Control DLL以致能运用到你的网页中去。在这里可以下载到最新的版本：]

http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=137125

Step 2
[步骤2]

The downloaded ZIP file contains the original source code of the control and a compiled version (in the "bin" directory"). So now, just create a reference to the compiled version. You have two options to do that:
[在你下载的ZIP压缩包里面包含有源代码和一个编译过的版本（在“bin”文件夹中）。现在，你就可以用以下两种方法来创建编译版本的引用了：]

Right-clicking in "References" in your Visual Studio.Net project.
[在你的Visual Studio.Net项目中鼠标右击"References"。]
Manually copying the DLL to the "bin" directory of your web site.
[手动把DLL文件复制到你站点下的“bin”目录下。]
You can include the control in your Visual Studio.Net controls toolbox. Just right-click on it and select "Add/Remove Items...". Then, just point to the downloaded DLL.
[只要在Visual Studio.Net工具箱中右击选择"Add/Remove Items..."，选择刚才下载的DLL文件，就可以把它添加到工具箱中。]

Step 3
[步骤3]

Now the editor is ready to be used in your site, so just create a ASP.Net page and, to create an instance of the editor, you have two options:
[现在就可以把编辑器运用到你的站点中去，你有如下两种方法创建一个包含有编辑器的实例ASP.Net页面：]

Just drag and drop the control in your page from the toolbox (if you have added it to the toolbox as described at "Step 2").
[把它从工具箱中拖拉出来（如果你如“步骤2”所说的那样把它加到工具箱的话）]
Include the following line in the top of your ASP.Net page source:
[先把下面代码加到ASP.Net代码的顶端：]
<%@ Register TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>

And then adding the editor tag inside a <FORM runat="server">:
[然后在添加编辑器时包含标记<FORM runat="server">：]

<FCKeditorV2:FCKeditor ></FCKeditorV2:FCKeditor>

The complete sample
[完整的例子]

<%@ Page ValidateRequest="false" Language="C#" AutoEventWireup="false" %>
<%@ Register TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>
<html>
  <head>
    <title>FCKeditor - Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <form runat="server">
      <FCKeditorV2:FCKeditor ></FCKeditorV2:FCKeditor>
      <br>
      <input type="submit" value="Submit" runat="server">
    </form>
  </body>
</html>

Samples
[示例]

You can find some samples on how to use the editor in the "_samples/aspx" directory of the FCKeditor.Net distribution package. To install the samples, just copy that directory to the _samples directory found in the FCKeditor core package installation.
[在FCKeditor.Net发行包中的“_samples/aspx”目录下，你能够找到一些如何使用编辑器的示例。如果要安装这些示例，只要从FCKeditor安装包中复制_samples文件夹过来就可以了。]

Properties
[属性]

The following properties are exposed by the ASP.NET server control.
[以下是可由ASP.NET服务器控制的属性。]

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

The following events are raised by the ASP.NET server control.
[以下是可由ASP.NET服务器控制的属性。]

OnDataBinding
OnDisposed
OnInit
OnLoad
OnPreRender
OnUnload

Special note if you are using Asp.net 2.0 and themes: you must open up \editor\filemanager\upload\aspx\upload.aspx and editor\filemanager\browser\default\connectors\aspx\connector.aspx and modify the first line to add Theme="" as follows: <%@ Page language="c#" Inherits="FredCK.FCKeditorV2.FileBrowserConnector" AutoEventWireup="false" Theme="" %>
[如果你使用Asp.net 2.0和主题，要特别注意：你必须展开\editor\filemanager\upload\aspx\upload.aspx和editor\filemanager\browser\default\connectors\aspx\connector.aspx，就像这样在第一行上加Theme=""：<%@ Page language="c#" Inherits="FredCK.FCKeditorV2.FileBrowserConnector" AutoEventWireup="false" Theme="" %>]

You can set the default UserFiles path in your web.config file:
[你能够在web.config文件中设置默认的UserFiles路径：]

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

Changing the UserFilesPath to be dynamic
[动态改变UserFilesPath]

Suppose you would like to modify the location of user uploaded files. You can do so without dynamically adding the control, but you should do so in the page init, not the page load. For example, here is an example which uses files for each team in the same directory:
[假如你想修改用户上传文件的位置。那么可以不用动态添加控件，但你要在页面初始化时修改，而不是在页面装载的时候。例如，在下面的例子中，每个组的用户文件都在一个文件夹中：]

Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
   Session("FCKeditor:UserFilesPath") = "~/App_Images/" & _teamName
End Sub

add an editor Dynamically in your code
[动态添加编辑器到你的代码中]

if you use an application method (virtual directory), then set the Base path in the web.config file:
[如果你使用应用程序的方法（虚拟目录），那么要在web.config文件中设置Base路径：]

For example if this is your FCKeditor path "c:/inetpub/wwwroot/virtualdir/FCKeditor/"
[例如如果这是FCKeditor路径"c:/inetpub/wwwroot/virtualdir/FCKeditor/"]

add this:
[那么加上：]

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

I use a session to set the filebrowsers path, Add the session variable before you make the control
[如果用事务设置filebrowsers路径，那么要在使用控件前加上事务的变量]

Session("FCKeditor:UserFilesPath") = "/virtualdir/userfiles/"

Add the control to the page:
[在页面中添加控件：]

            Dim fckeditor As New FredCK.FCKeditorV2.FCKeditor
            fckeditor.ImageBrowserURL = "http://localhost/virtualdir/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx"
            fckeditor.ID = "dynamicname"
            fckeditor.Value = "the text you want in the FCK editor"
            fckeditor.SkinPath = "skins/silver/"
            fckeditor.ToolbarSet = "Default"
            myForm.Controls.Add(fckeditor)

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1709574