FCKEditor在Asp.net环境下的配置安装

　　

FCKEditor在Asp.net环境下的配置安装
不知道大家留意到没有了:
FreeTextbox 不开源了，虽然我还有它以前的开源版本。

[align=left]CSDN用的这个在线编辑器很优秀。[/align]

[align=left]它的名字叫做FCKEditor[/align]

[align=left]它是开源的[/align]

[align=left]与平台无关，最起码能支持 Asp， Asp.net ， PHP[/align]

　　以前我一直用FreeTextBox(主要是从Community Server那里知道的)。但是发现它并不是想象中好用，主要是上传图片没有弄好。好了好了，言归正传，说说我们今天的主角，FCKEditor，怎么在Asp.net中部署吧。
　　首先，他的网站下载吧。这里要注意，你要下载两个ZIP文件，一个是Core，即核心文件，里面是整个FCKEditor的核心。第二个是For .net的组件。为了描述方便，我将真实文件名附上，以后要自己灵活修改啊。
　　下载的核心文件叫FCKeditor_2.3.1.zip
　　For .net 的文件叫FCKeditor.Net_2.2.zip
　　部署步骤:
　　解压FCKeditor_2.3.1.zip，将里面的FCKEditor复制到你的IIS主目录里面，其实要的效果是能够这样访问到就可以了 http://localhost/Fckeditor/ ，将http://localhost/Fckeditor/fckconfig.js的变量:
　　_FileBrowserLanguage，_QuickUploadLanguage 的值改为 aspx，不难做吧。
　　(可选)将复制好的FCKEditor里的以 '_' 开头的文件及文件夹删除，当然如果你是在开发也可以不删除，里面都是示例及调试页面。
　　解压缩FCKeditor.Net_2.2.zip，然后在VS.net 2003中添加新的控件那样添加，bin/Release/FredCK.FCKeditorV2.dll 这个文件，呵呵，以后你就可以随便拖放这个控件了。
　　(重要)将上面的DLL文件复制到 http://localhost/FCKeditor/editor/filemanager/upload/aspx/bin/ 　　然后在IIS设置中让 http://localhost/FCKeditor/editor/filemanager/upload/aspx/ 这个目录可以运行Aspx。同样，http://localhost/FCKeditor/editor/filemanager/browser/default/connectors/aspx/ 也要重复上面的过程。
　　另外一种更加简单的方法是将FredCK.FCKeditorV2.dll 复制 http://localhost/FCKeditor/bin/ 目录下，然后在IIS中创建应用程序。
　　这一步的目的是让:
　　http://localhost/FCKeditor/editor/filemanager/browser/default/connectors/aspx/connector.aspx
　　http://localhost/FCKeditor/editor/filemanager/upload/aspx/upload.aspx
　　这两个文件能够工作。
　　好了，到此为止，你在aspx也里面拖入FCKEditor，将BasePath 设置为 /FCKEditor/就可以用了。
如果:
　　http://localhost/FCKeditor/editor/filemanager/browser/default/connectors/aspx/connector.aspx 工作不正常
　　你在浏览服务器时，就会有XML Request Error:XXXXXXXXXXXXXX(500)错误。
　　http://localhost/FCKeditor/editor/filemanager/upload/aspx/upload.aspx
　　你在上传图片时，按钮怎么按都没有反应的。
在jsp环境中配置使用FCKEditor
FCKeditor是sourceforge.net上面的一个开源项目，主要是实现在线网页编辑器的功能，可以让web程序拥有如MS Word这样强大的编辑功能。官方网站为http://www.fckeditor.net ，在服务器端支持ASP.Net、ASP、ClodFusion、PHP、Java等语言，并且支持IE 5+、Mozilla 、Netscape等主流浏览器。
　　首先在官方网站下载fckeditor,注意有两个包，一个是主文件，一个是jsp整合包的。
　　1、解压FCKeditor_2.2.zip,(FCKeditor主文件)，将FCKeditor目录复制到网站根目录下，
　　2、解压FCKeditor-2.3.zip,(jsp,FCKeditor整合包)，作用：This is the JSP Integration Pack for using FCKeditor inside a java server page without the complexity of using a Java scriptlets or the javascript api.
　　3、将FCKeditor-2.3/web/WEB-INF/web.xml中的两个servlet,servlet-mapping定义复制到自已项目的web.xml文件中
修改

<servlet-mapping> <servlet-name>Connector</servlet-name> <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>SimpleUploader</servlet-name> <url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern> </servlet-mapping>

　　为

　　4、将FCKeditor-2.3/web/WEB-INF/lib目录下文件复制到自已项目的lib文件夹中
　　5、在需使用FCKeditor的jsp界面中加入：

　　启动服务器测试。。。。成功后，来给FCKeditor瘦瘦身.
　　1、将FCKeditor目录下及子目录下所有以”_”下划线开头的文件夹删除
　　2.FCKeditor根目录下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml其余全部删除
　　3.将editor/filemanager/upload目录下文件及文件夹清空.
　　4.还可以将editor/skins目录下的皮肤文件删除，只留下default一套皮肤（如果你不需要换皮肤的话）
　　5.还可以将editor/lang目录下文件删除，只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件（英文，简体中文，繁体中文一般应该够用了:) ）
　　完成，现在看是不是清爽了很多？
　　其它问题：
在struts+spring+hibernate中使用，上传图像功能中可能会出现报：
The output format must have a ‘{http://xml.apache.org/xalan}content-handler’ property!
错的情况，将WEB-INF/lib目录下xalan*.jar删除试试
　　安全问题：
假如在前台让普通用户也能使用FCKEditor,要注意相关安全问题,在前台使用时,不要使用默认的ToolBar，
要将添加图像，flash，图像域按钮去掉
在fckconfig.js中大约78行配置 那些数组中的值就像当于界面上的一个功能，你可以强行把每组值试出来代表什么。：P
　　到此安装FCKeditor就完成了，相关详细配置你可以看FCKeditor-2.3.zip,(jsp,FCKeditor整合包)文件夹中web/_samples目录下的例子。

PHP环境下配置在线编辑器FCKeditor

在线编辑器FCKeditor 2.0PHP环境下试用小记
　　一、简介
　　2004年11月30日推出了FCKeditor 2.0 RC1版，据其官方网站称：这是FCKeditor 2.0版的第一个稳定版本。大家现在可以考虑正式使用它了。目前支持的后台语言有ASP、ASP.Net、PHP和ColdFusion。
　　笔者在经过简单的试用发现，在线编辑器2.0版确实比1.6版有了许多的改进。首先是FCKeditor的文件结构更加清晰，可以更方便地将其部署在自己的系统中。另外2.0版终于支持了Firefox 1.0浏览器，这将为FCKeditor赢得更多的使用者。废话不多说，让我们赶快来学习如何安装、配置FCKeditor 2.0吧。
[align=left]　　二、安装与范例[/align]
[align=left]
首先到http://sourceforge.net/projects/fckeditor/ 下载FCKeditor 2.0 RC1（554K），并将其解压缩到你的网站目录里面，并将文件夹名改为FCKeditor。举例来说，如果你的网站放在shaof这个目录下面，则在这个目录中建立3个子目录：[/align]
[align=left]n FCKeditor：存放从网站上下载的FCKeditor在线编辑器[/align]
[align=left]n upimages：用于存放上传的图片[/align]
[align=left]n admin：里面存放测试页面[/align]
[align=left]
网站的结构如下：[/align]
[align=left] [/align]

/FCKeditor //FCKeditor目录 /UserFiles //上传文件目录 /admin test.php //提交数据页面 testsubmit.php //显示数据页面 进入到FCKeditor目录下，打开_samples目录，里面含有各种编程语言调用FCKeditor的范例程序页面，其中php目录中包含着一些使用PHP来调用FCKeditor的范例，大家可以看一下，了解FCKeditord的调用方法，下面是我简写了一个test.php程序，放在网站根目录下的admin目录中： if($_POST["ADD"]){ $Content=$_POST['EditorDefault']; echo $Content; //变量$Content就是我们在FCKeditord里面编辑的内容，这里可以将其保存到数据库，代码省略。 }

　 　

　　三、配置在线编辑器

FCKeditor 2.0的配置文件为FCKeditor/fckconfig.js，其中几个重要的配置项目如下：

　　1、工具栏的设置

默认情况下，FCKeditor会调用如下的工具栏按钮，大家可以根据自己的需要进行增减。需要注意的是，2.0版与1.6版的按钮并不完全相同，有些按钮以及删除或者改名了。

//## //## Toolbar Buttons Sets //## FCKConfig.ToolbarSets["Default"] = [ ['Source','-','Save','NewPage','Preview'], ['Cut','Copy','Paste','PasteText','PasteWord','-','Print'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'], ['OrderedList','UnorderedList','-','Outdent','Indent'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], ['Link','Unlink'], ['Image','Table','Rule','SpecialChar','Smiley'], ['Style','FontFormat','FontName','FontSize'], ['TextColor','BGColor'], ['About'] ] ;

[align=left]

　　2、简体中文设置

　　编辑edit/lang/fcklanguagemanager.js

将下面语句[/align]

FCKLanguageManager.AvailableLanguages = { 'ar' : 'Arabic', 'bs' : 'Bosnian', 'ca' : 'Catalan', 'en' : 'English', 'es' : 'Spanish', 'et' : 'Estonian', 'fi' : 'Finnish', 'fr' : 'French', 'gr' : 'Greek', 'he' : 'Hebrew', 'hr' : 'Croatian', 'it' : 'Italian', 'ko' : 'Korean', 'lt' : 'Lithuanian', 'no' : 'Norwegian', 'pl' : 'Polish', 'sr' : 'Serbian (Cyrillic)', 'sr-latn' : 'Serbian (Latin)', 'sv' : 'Swedish' }

[align=left]
添加一行 'zh-cn' : 'Chinese' 从而变成[/align]

FCKLanguageManager.AvailableLanguages = { 'ar' : 'Arabic', 'bs' : 'Bosnian', 'ca' : 'Catalan', 'en' : 'English', 'es' : 'Spanish', 'et' : 'Estonian', 'fi' : 'Finnish', 'fr' : 'French', 'gr' : 'Greek', 'he' : 'Hebrew', 'hr' : 'Croatian', 'it' : 'Italian', 'ko' : 'Korean', 'lt' : 'Lithuanian', 'no' : 'Norwegian', 'pl' : 'Polish', 'sr' : 'Serbian (Cyrillic)', 'sr-latn' : 'Serbian (Latin)', 'sv' : 'Swedish', 'zh-cn' : 'Chinese' }

[align=left]
然后到这里http://www.shaof.com/download/zh-cn.js下载汉化好的zh-cn.js保存到editor/lang目录下即可。[/align]
[align=left] [/align]
　　四、设置文件上传


　　FCKeditor 2.0在线编辑器采用了一种名为“Connector”（连接器）的技术来实现对文件的浏览以及上传。下图显示了文件浏览的工作流程图。

[align=left]　　从图中可以看出，当客户端向服务器发出一个文件操作请求后，Connector就会对此请求进行响应，在服务器的文件系统中进行执行操作，如：文件和文件夹的浏览以及创建操作。最后将结果以XML的格式回应给客户端。具体的技术细节大家可以阅读FCKeditor自带的说明指南。[/align]
[align=left]　　落实到应用，首先我们要选择一个后台语言用来实现这个功能，这里我们以PHP为例进行说明。[/align]
[align=left]
　　1、 修改配置文件FCKeditor/fckconfig.js中的两段内容[/align]
[align=left] [/align]

//Link Browsing FCKConfig.LinkBrowser = true ; FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/php/connector.php" ; FCKConfig.LinkBrowserWindowWidth = screen.width * 0.7 ; // 70% FCKConfig.LinkBrowserWindowHeight = screen.height * 0.7 ; // 70% //Image Browsing FCKConfig.ImageBrowser = true ; FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php" ; FCKConfig.ImageBrowserWindowWidth = screen.width * 0.7 ; // 70% ; FCKConfig.ImageBrowserWindowHeight = screen.height * 0.7 ; // 70% ;

[align=left] [/align]
[align=left]　　2、 修改配置文件[/align]

FCKeditor/editor/filemanager/browser/default/connectors/php/connector.php // Get the "UserFiles" path. $GLOBALS["UserFilesPath"] = '/UserFiles/' ;

[align=left]
UserFiles为文件上传的路径，与本文开头所给的例子相对应，大家可以自行修改。[/align]
[align=left] [/align]
[align=left]　　好啦，只需要两步就完成了文件上传的配置工作，真是简单呀。以后我们通过FCKeditor上传的文件都会保存在网站的UserFiles目录下。[/align]
　　五、结束


[align=left]　　最后大家可以把FCKeditor目录下的_docs和_samples两个目录删除以节省空间。本文是笔者以前写过的一篇名为《在线编辑器FCKeditor在PHP中的使用方法》（1.6版）文章的升级版本，文章如有不妥之处，还请大家指正。

另，遇到的问题[/align]
　　1、图片文件上传路径问题

安装我文章里面的设置，上传路径设置为UserFiles/，但是上传图片文件时，FCKeditor都自动把文件上传到UserFiles/image目录下面，自做主张的建立了一个image目录，很是不爽。原因不明。

// 文件开头处加入 <%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %> //要使用的地方加入 <FCK:editor id="content" basePath="/FCKeditor/" imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image" linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File" flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash"> this is default content :) </FCK:editor>

<servlet-mapping> <servlet-name>Connector</servlet-name> <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>SimpleUploader</servlet-name> <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern> </servlet-mapping>