关于.net和jsp项目中fckeditro的使用

 FCKeditor 在 vs2005 环境下安装功略 很简单 分四步走
    一,下载FCKeditor文件
    先在官方网页上下载 FCKeditor 的压缩包  和 FCKeditor 的.net 2.0核心库
    [各位朋友可以先按照我的目录进行一次试做,然后再对自己的.net网站进行设置]
    下载地址:FCKeditor 的压缩包
     http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor_2.4.3.zip
    FCKeditor 的.net 2.0核心库
    http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor.Net_2.2.zip
    二,解压文件,把FCK放到项目中,建立引用,添加fck控件
 [解压文件到项目中]
     把这两个压缩文件放在D:\FCK\

     把FCKeditor.Net_2.2.zip   里的bin目录解压到D:\FCK\下
     把FCKeditor_2.4.3.zip     完全解压到你用.net2005做的项目文件夹里

     如果没有网站项目,你可以打开VS2005,新建网站,主目录设在D:\FckDemo\
     接下来把FCKeditor_2.4.3.zip   里的fckeditor目录释放到 D:\FckDemo\下
    
     [添加引用]
     在解决方案资源管理器中右击当前项目,添加引用,把 
      D:\FCK\bin\Debug\FredCK.FCKeditorV2.dll引用进来

     [在工具箱中添加FCKeditor的控件]
     我们添加一个选项卡,取名为FCK,在其下 “选择项”,浏览到当前项目里的
     D:\FckDemo\bin\FredCK.FCKeditorV2.dll,点确定
    
     三,拖动控件到界面上,并修改FCK设置, 以及webconfig.xml中的设置    
     打开Default.aspx,直接把左边工具条里的fckeditor控件拖到界面中,我们
  看到显示了fckeditor,在属性里改width为800,改height为500.
    这个时候你想要运行调试,肯定会出错。。。。。。

    那么我们先要改FCK内的设置:
    解决方案资源管理器中找到fckeditor\fckconfig.js
    先改FCK默认语言en为zh-cn
    FCKConfig.DefaultLanguage  = 'en' ;
    替换为
    FCKConfig.DefaultLanguage  = 'zh-cn' ;
    再改FCK默认上传使用的组件语言为aspx
    var _FileBrowserLanguage = 'asp' ;
    var _QuickUploadLanguage = 'asp' ;
    替换为
    var _FileBrowserLanguage = 'aspx' ;
    var _QuickUploadLanguage = 'aspx' ;
    最后再改项目的webconfig.xml
   打开webconifg。xml, 在<appSettings>中设置两个键
  <add key="FCKeditor:BasePath" value="/FckDemo/fckeditor/" />
  <add key="FCKeditor:UserFilesPath" value="/FckDemo/Files/" />
    FckDemo是你的项目名称,要注意

   四  ,修改Default.aspx文件头部属性
    将<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FckDemo.aspx.cs"

Inherits="FckDemo" %>
    替换为
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="FckDemo.aspx.cs"

Inherits="FckDemo" ValidateRequest="false" %>
    加这一项能保证FCK在上传时不会失败


由于项目需要,研究了一下FCK的使用,本文主要说明如果在jsp环境中使用FCK的各项功能。
1:下载FCK editor包,我用的是最新的2.5版本,解压后会有fckeditor这样的一个文件夹。

2:下载FCK editor JAVA包,解压后,在wtp或eclipse等IDE开发环境中建立web项目,具体步骤略。

3:将FCK editor包中的fckeditor文件夹复制到web项目中的根目录下,这样做的好处就是fck editor的文

件非常多,如果直接将fck editor里面的内容复制到根目录,非常乱,不方便以后的升级。

4:web.xml可根据自已的需求进行修改。 我自己修改的如下:
<!-- fckeditor start -->
  <servlet>
    <servlet-name>Connector</servlet-name>
    <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
    <init-param>
      <param-name>baseDir</param-name>
      <param-value>/UserFiles/</param-value>
    </init-param>
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet>
    <servlet-name>SimpleUploader</servlet-name>
    <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
    <init-param>
      <param-name>baseDir</param-name>
      <param-value>/UserFiles/</param-value>
    </init-param>
    <init-param>
      <param-name>debug</param-name>
      <param-value>false</param-value>
    </init-param>
    <init-param>
      <param-name>enabled</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>AllowedExtensionsFile</param-name>
      <param-value />
    </init-param>
    <init-param>
      <param-name>DeniedExtensionsFile</param-name>
      <param-

value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
    </init-param>
    <init-param>
      <param-name>AllowedExtensionsImage</param-name>
      <param-value>jpg|gif|jpeg|png|bmp</param-value>
    </init-param>
    <init-param>
      <param-name>DeniedExtensionsImage</param-name>
      <param-value />
    </init-param>
    <init-param>
      <param-name>AllowedExtensionsFlash</param-name>
      <param-value>swf|fla</param-value>
    </init-param>
    <init-param>
      <param-name>DeniedExtensionsFlash</param-name>
      <param-value />
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>PostArticle</servlet-name>
    <servlet-class>servlet.PostArticle</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>action</servlet-name>
    <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
    <init-param>
      <param-name>config</param-name>
      <param-value>/WEB-INF/struts-config.xml</param-value>
    </init-param>
    <init-param>
      <param-name>debug</param-name>
      <param-value>3</param-value>
    </init-param>
    <init-param>
      <param-name>detail</param-name>
      <param-value>3</param-value>
    </init-param>
    <load-on-startup>0</load-on-startup>
  </servlet>
  <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>
  <servlet-mapping>
    <servlet-name>PostArticle</servlet-name>
    <url-pattern>/servlet/post</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>action</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
  <!-- fckeditor end -->

5:运行项目,应该可以看到一个编辑器显示出来了。
6:下面大概说一下如何配置FCK editor。FCK editor的主要配置在fckconfig.js中。
var _FileBrowserLanguage = 'jsp' ;
var _QuickUploadLanguage = 'jsp' ;
这个是设置文件上传的相应的语言的
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
 这个是控制fck editor的样式的,还有其它两个选择,一个是office2003风格,还有一个是灰色风格的,

只需要替换上面的default即可。具体路径在web\fckeditor\editor\skins下可以找到。
FCKConfig.DefaultLanguage  = 'zh-cn' ; 这个是默认支持的语言,fck editor支持好多种语言,如果不

考虑国际化的话,可以把语言文件都删掉。路径在\web\fckeditor\editor\lang,我只保留了zh-cn。
FCKConfig.TabSpaces = 8;这是设置tab键的。0为tab键不生效,1为tab键的长度为1,我设置为8。
FCKConfig.ToolbarSets["Default"];设置fck editor的工具栏,我只保留了['ImageButton']。这样速度

比较快。
FCKConfig.Keystrokes;设置fck editor里的快捷键,如果不想用户使用,注释掉就可以了。
FCKConfig.ImageDlgHideLink  = true ;
FCKConfig.ImageDlgHideAdvanced = true ;设置图像上传时候的Link标签和高级标签是否显示,如果想隐

藏就设置为true。
再页面进行应用的时候的代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="f"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort

()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP page</title>
  </head>
  <body>
    <form action="servlet/post" method="post">
     title:<input type="text" name="title"><br>
     <f:editor id="content"  basePath='<%=path + "/FCKeditor/"%>'
    imageBrowserURL='<%=path
       +

"/FCKeditor/editor/filemanager/browser/default/browser.html?

Type=Image&Connector=connectors/jsp/connector"%>'
    linkBrowserURL='<%=path
       +

"/FCKeditor/editor/filemanager/browser/default/browser.html?

Connector=connectors/jsp/connector"%>'
    flashBrowserURL='<%=path
       +

"/FCKeditor/editor/filemanager/browser/default/browser.html?

Type=Flash&Connector=connectors/jsp/connector"%>'
    imageUploadURL='<%=path
       +

"/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"%>'
    linkUploadURL='<%=path
       +

"/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"%>'
    flashUploadURL='<%=path
       +

"/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash"%>'>
  
  
   </f:editor>
   <input type="submit">
    </form>
  </body>
</html>

posted on 2008-05-25 10:39  小顾问  阅读(1404)  评论(1编辑  收藏  举报