随笔-10  评论-23  文章-32  trackbacks-0
    环境:
         jdk1.6
         tomcat6.0
         myeclipse6.1
         fckeditor2.6.4.1

    jar:
         总共需要5个jar包,在fckeditor-java-2.4.2-bin.zip 解压后的文件夹下可以找到4个,还有一个需要自己上网下载
         5个jar:
        
         (其中slf4j-api-1.5.8.jar 和 slf4j-jdk14-1.5.8.jar版本必须一致)

         前四个jar能在fckeditor-java-2.4.2-bin.zip解压后的文件夹下找到
         但是在fckeditor文件夹下的slf4j-api.jar 是1.5.2版本的, 我的slf4j的两个jar包都是从slf4j官网下载的。
         slf4j官网下载地址:http://www.slf4j.org/download.html 先下载下来slf4j.zip然后解压后在文件夹里找的到。

    1.新建一个web工程
    2.将上面的5个jar包导入到工程的WebRoot/WEB-INF/lib下
    3.解压FCKeditor_2.6.4.1.zip后,将解压出来的文件夹fckeditor复制到WebRoot下
    4.在src下建一个新.properties文件-->fckeditor.properties
      内容如下:
connector.userFilesPath=UploadFile
connector.userActionImpl
=net.fckeditor.requestcycle.impl.UserActionImpl
   
    5.在工程配置文件-->web.xml中配置一个servlet

  <?xml version="1.0" encoding="UTF-8"?>
  <web-app version="2.5" 
      xmlns="http://java.sun.com/xml/ns/javaee" 
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
      http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <welcome-file-list>
      <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
   <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>
 </web-app>
   
   6.新建一个jsp文件,名为test.jsp,放到webRoot下即可
   
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
    pageEncoding
="UTF-8"%>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%>
<%
    String path 
= request.getContextPath();
    String basePath 
= request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

    String content
=request.getParameter("edt1");
    
if (content != null) {
          content 
= content.replaceAll("\r\n""");
          content 
= content.replaceAll("\r""");
          content 
= content.replaceAll("\n""");
          content 
= content.replaceAll("\"""'");
    }else{
          content 
= "";
    }
    content 
= new String(content.getBytes("iso8859-1"),"utf-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 
<base href="<%=basePath%>">
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<title>fck 测试</title>
 
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
    
<form method="post" name="frm1">
    
<FCK:editor height="400" instanceName="edt1" value="<%=content%>" toolbarSet="Basic">
        
<FCK:config SkinPath="skins/office2003/"/>
    
</FCK:editor>
    
<input type="submit" value="提交">
    
</form>
    
<hr>
    
<%=content%>
</body>
</html>

<!--
    如果不使用FCK tag 的话,可以使用如下的javascript方式调用
    
<script type="text/javascript">
        var oFCKeditor 
= new FCKeditor("edt1");
        oFCKeditor.BasePath 
= "fckeditor/";
        oFCKeditor.Height
='400';
        oFCKeditor.ToolBarSets
="Basic";
        oFCKeditor.Value
="<%=content%>";
        oFCKeditor.Create();
    
</script>
 
-->
 
    7.目录结构如下图
    
   
     8.先访问jsp页面,启动tomcat以后,直接访问jsp地址,我的是 http://localhost:8888/fckeditor01/test.jsp
       然后就可以测试了(至于struts2来说,原理是一样的)

     9.效果图
            

      在上传图片的时候发现一个小问题:就是图片上传成功了以后,但你输入的时候插入图片,界面如下:
     
      就是说源文件地址不正确,预览中不能正确显示,正确的应该是/fckeditor01/UploadFile/image/Jianyue18.jpg,我也不知道为什么少了一个"/",加上“/”就能正确显示了,这就是知其然不知其所以然的痛苦啊,之后有时间了研究一下源码再来分享。

     此例是参考网上资料所做,特别感谢那些乐于分享的人们.

posted on 2009-07-21 14:22 liuyimx 阅读(1026) 评论(1)  编辑  收藏 所属分类: fckEditor

评论:
# re: fckeditor2.6.4例1[未登录] 2011-11-15 16:52 |
我的fck有些视频上传的插件···导入不对


点服务浏览器的时候那个页面没反应  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: