FCKeditor 2.6.3 与FCKeditor.java 2.4在JSP中配置

1.FCKeditor 介绍
FCKeditor 这个开源的HTML 文本编辑器可以让web 程序拥有如MS Word 这样强大的编辑功能,.FCKeditor 支持当前流行的浏览器:

2.准备工作:

环境:winddows XP、tomcat6.0、JDK1.6
下载:
1):FCKeditor_2.6.3b.zip
地址:http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor_2.6.3b.zip
2):fckeditor-java-2.4-bin.zip (JAVA支持包)地址http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-2.4-bin.zip
3)slf4j-1.5.2.zip 地址 :http://slf4j.org/dist/slf4j-1.5.2.zip

3.安装:

1)解压FCKeditor_2.6.3b.zip,将解压的到的fckeditor整个文件夹完整复制到工程目录WebRoot下。
2)解压fckeditor-java-2.4-bin.zip,在fckeditor-java-2.4-bin的解压缩文件中提取出4个JAR包,分别为fckeditor-java-core-2.4.jar、commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar、slf4j-api-1.5.2.jar,
3)解压slf4j-1.5.2.zip,只需提取slf4j-jdk14-1.5.2.jar包
4)将2、3步提取的5个包都都导如工程目录WEB-INF/bin中

插句题外话,刚开始我只导入了第2步截压出的4个包,启动TOMCAT的时候提示找不到类org.slf4j.impl.StaticLoggerBider,再看官方文档,上面说还要下SLF4J,于是便到slf4j官网下了个最新版,但不知道org.slf4j.impl.StaticLoggerBider类在哪个包里,这是我最笨之处,我将所有包都导进去慢慢找(汗……),然后把多余包给移除了(通过项目右键→Properties→Java Build Path→Libraries,移除多余包),再重启,现在不报找不到类的错了,但出现了上百条java.lang.StackOverflowError错误(再汗……),查了N久,没结果,然后在MyEclipse的lib目录下还发现了一大堆刚才移除的包,接着我就把他们统统右键Delete删除,再重启,嘿嘿,OK了。

4.配置

1)在共程目录src/下新建一个文件fckeditor.properties,添加内容:connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl 保存即可。
2)修改web.xml,用来提供上传功能支持,
添加内容:
<servlet>
      <servlet-name>Connector</servlet-name>
        <servlet-class>
          net.fckeditor.connector.ConnectorServlet
      </servlet-class>
      <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
      <servlet-name>Connector</servlet-name>
      <url-pattern>
        /fckeditor/editor/filemanager/connectors/*
      </url-pattern>
    </servlet-mapping>
5.应用
在工程目录WebRoot下新建index.jsp,result.jsp两个文件,
index.jsp:
<%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%>
<%@ taglib uri=”http://java.fckeditor.net” prefix=”FCK” %>
<%
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>FCKeditor.java2.4 for FCKeditor2.6.3Beate text</title>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>   
<meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″>
<meta http-equiv=”description” content=”This is my page”>
</head>
<body>
    <form action=”result.jsp” method=”post”>
    <FCK:editor instanceName=”content”>
    <jsp:attribute name=”value”>
    您的内容…..
    </jsp:attribute>
</FCK:editor>
<input type=”submit” value=”提交”>
    </form>
   
</body>
</html>
result.jsp
<%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%>
<%
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 ‘result.jsp’ starting page</title>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>   
<meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″>
<meta http-equiv=”description” content=”This is my page”>
</head>
<body>
    <%=request.getParameter(”content”) %>
</body>
</html>

在IE地址中输入:http://localhost:8080/FCKtest    OK,成功了!

6.不足之处

世界上没有绝对完美的女子(不知道你是否发现了完美的女孩,错了不要打我),FCK也一样。
1) 在文本框中输入中文提交后得到的中文乱码。
解决办法:
Result.JSP中来转码:
new String(request.getParameter(“content”).getByte(iso-8859-1),”UTF-8”)
试验下,嘿嘿,”汉化”成功!
或者加上
<%    
   request.setCharacterEncoding("UTF-8");    
%>
    
<body>    
   <h1>FCKeditor - 显示数据</h1>      
   <hr/><br />    
   <%=request.getParameter("context")%>    
</body>    
</html> 

2) 上传中文名图片后保存的中文图片名乱码
解决办法:修改fckeditor-java-core-2.4.jar包中的ConnectorServlet.javaupload.setHeaderEncoding(”UTF-8″);),替换以前下载的fckeditor-java-core-2.4.jar包,
OK,上传中文图片名显示正常了,

3) 点击浏览服务器后,选择刚上传的中文图片,图片在预览窗口中不能显示
解决办法:
修改TOMCAT安装目录config下的server.xml文件,在<Connector/>标签内加上 URIEncoding=”UTF-8″。
OK,中文图片正常显示。

4) 关与FLASH的上传
A.上传中文文件名FLASH时,有时候弹出没有权限,或者是文件类型错误,有时候上传正常。
B.上传英文或者数字名FLASH时,窗口一直处与等待状态,过一会儿关闭窗口,再通过浏览服务器按钮可以看到FLASH已经成功上传。
C.有时候如过上传成功了,预览窗口也不能播放。
D.有时候无论使用什么语言的文件名都可以上传成功。
但只要你是使用的英文或则数字文件名,就能100%上传。

所以关于这个问题估计还是编码引起的。

5)。FCKeditor2.6.2上传文件功能与Struts 2 不兼容的问题。
解决办法:
让Struts2仅处理*.action的请求。修改配置文件web.xml:
将Struts2处理所有web请求的过滤器配置
<filter-mapping>
              <filter-name>struts2</filter-name>
              <url-pattern>/*</url-pattern>
       </filter-mapping>
改为:仅处理.action或.jsp请求
<filter-mapping>
              <filter-name>struts2</filter-name>
              <url-pattern>*.action</url-pattern>
       </filter-mapping>
       <filter-mapping>
              <filter-name>struts2</filter-name>
              <url-pattern>*.jsp</url-pattern>
       </filter-mapping>
备注:以上配置文件的更改会造成Struts2 标签在页面中不显示
       应该在web.xml文件中加入以下配置:
<filter-mapping>
              <filter-name>struts2</filter-name>
              <url-pattern>/struts/*</url-pattern>
       </filter-mapping>

附:FCKeditor的编码是个老大难,想真正让他很好的处理中文是件非常不容易的事情,例如上面费了好大劲将中文名图片的上传和浏览功能修改好之后,FLASH又出问题。这些都是编码惹的祸。

7.总结:

FCKeditor2.6.3 Beta在2.6.2基础上有了很大改进,FCKeidtor 2.6.3Beta在配置上进行了大量简化,让使用者更易轻松上手,但FCKeditor的编码是个老大难问题,特别在文件上传功能上表现的尤为突出,希望FCK官方在以后的版本中能够修正这个BUG。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1.下载最新的FCKEDITOR 2.解压缩到你的站点根文件夹名为FCKEDITOR的文件夹(名称必须为FCKEDITOR,因为配置文件已经使用此名称来标示出FCKEDITOR的位置) 3.现在,编辑器就可以使用了,如果想要查看演示,可以按下面方法访问: http:///FCKeditor/_samples/default.html 注意:你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放入到FCKEDITOR文件夹是最为简单的方法.如果你放入的文件夹使用别的名称,请修改配置文件夹编辑器BasePath参数,如下所示: oFckeditor.BasePath="/Components/fckeditor/"; 另外,FCKEDITOR文件夹所有以下划线开头的文件夹及文件,都是可选的,可以安全的从你的发布删除.它们并不是编辑器运行时必需的 如何将FCKEDITOR整合进我的页面? 由于目前的版本提供的FCKEDITOR仅提供了JAVASCRIPT式的整合,因此,这里仅讲述如何应用JAVASCRIPT来整合FCKEDITOR到站点,当然,其他各种语言的整合,你可以参考_samples文件夹的例子来完成 1,假如编辑器已经安装在你的站点的/FCKEDITOR/文件夹下.那么,第一步我们需要做的就是在页面的HEAD段放入SCRIPT标记以引入JAVASCRIPT整合模块.例如: 其路径是可更改的 2,现在,FCKEDITOR类已经可以使用了.有两个方法在页面建立一个FCKEDITOR编辑器: 方法1:内联方式(建议使用):在页面的FORM标记内需要插入编辑器的地方置入以下代码: script type="text/javascript"> var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ; oFCKeditor.Create() ; 方法2:TEXTAREA标记替换法(不建议使用):在页面的ONLOAD事件,添加以下代码以替换一个已经存在的TEXTAREA标记 window.onload = function() { var oFCKeditor = new FCKeditor( 'MyTextarea' ) ; oFCKeditor.ReplaceTextarea() ; } This is the initial value. 3.现在,编辑器可以使用了 FCKEDITOR类参考: 下面是用来在页面建立编辑器的FCKEDITOR类的说明 构造器: FCKeditor( instanceName[, width, height, toolbarSet, value] ) instanceName:编辑器的唯一名称(相当于ID) WIDTH:宽度 HEIGHT:高度 toolbarSet:工具条集合的名称 value:编辑器初始化内容 属性: instanceName:编辑器实例名 width:宽度,默认值为100% height:高度,默认值是200 ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Default value:初始化编辑器的HTML代码,默认值为空 BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最好能用相对于站点根路径的表示方法,要以/结尾 CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为true DisplayErrors:是否显示提示错误,默为true; 集合: Config[Key]=value; 这个集合用于更改配置某一项的值,如 oFckeditor.Config["DefaultLanguage"]="pt-br"; 方法: Create() 建立并输出编辑器 RepaceTextArea(TextAreaName) 用编辑器来替换对应的文本框 如何配置FCKEDITOR? FCKEDITOR提供了一套用于定制其外观,特性及行为的设置集.主配置文件名为Fckconfig.js 你既可以编辑主配置文件,也可以自己定义单独的配置文件.配
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值