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

最新推荐文章于 2024-08-09 17:50:34 发布

xcjwxx

最新推荐文章于 2024-08-09 17:50:34 发布

阅读量630

点赞数

文章标签： fckeditor asp.net jsp php coldfusion 服务器

FCKEditor在Asp.net环境下的配置安装
不知道大家留意到没有了:

FreeTextbox 不开源了，虽然我还有它以前的开源版本。

CSDN用的这个在线编辑器很优秀。
它的名字叫做FCKEditor
它是开源的
与平台无关，最起码能支持 Asp， Asp.net ， PHP

　　以前我一直用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吧。

　　二、安装与范例

首先到http://sourceforge.net/projects/fckeditor/ 下载FCKeditor 2.0 RC1（554K），并将其解压缩到你的网站目录里面，并将文件夹名改为FCKeditor。举例来说，如果你的网站放在shaof这个目录下面，则在这个目录中建立3个子目录：

n FCKeditor：存放从网站上下载的FCKeditor在线编辑器

n upimages：用于存放上传的图片

n admin：里面存放测试页面

网站的结构如下：

      /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']
] ;

　　2、简体中文设置

　　编辑edit/lang/fcklanguagemanager.js

将下面语句

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' 从而变成

然后到这里http://www.shaof.com/download/zh-cn.js下载汉化好的zh-cn.js保存到editor/lang目录下即可。

　　四、设置文件上传

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

　　从图中可以看出，当客户端向服务器发出一个文件操作请求后，Connector就会对此请求进行响应，在服务器的文件系统中进行执行操作，如：文件和文件夹的浏览以及创建操作。最后将结果以XML的格式回应给客户端。具体的技术细节大家可以阅读FCKeditor自带的说明指南。

　　落实到应用，首先我们要选择一个后台语言用来实现这个功能，这里我们以PHP为例进行说明。

　　1、修改配置文件FCKeditor/fckconfig.js中的两段内容

//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% ;

　　2、修改配置文件

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

UserFiles为文件上传的路径，与本文开头所给的例子相对应，大家可以自行修改。

　　好啦，只需要两步就完成了文件上传的配置工作，真是简单呀。以后我们通过FCKeditor上传的文件都会保存在网站的UserFiles目录下。

　　五、结束

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

另，遇到的问题

　　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>

xcjwxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FCKEditor在Asp.net环境下的配置安装

　　<!--google_ad_client = "pub-2512812916622942";google_ad_width = 160;google_ad_height = 600;google_ad_format = "160x600_as";google_ad_type = "text_image";//2007-10-01: rizhine160600
复制链接

扫一扫