FCKEditor编辑器的应用(一) _Web前端

FCKEditor编辑器的使用(一)

首先下载我们需要的JS文件和JAR包

1)：FCKeditor_2.6.4.zip
地址：http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor_2.6.4.zip
2)：fckeditor-java-2.4.1-bin.zip (JAVA支持包)地址http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-2.4.1-bin.zip
3)：slf4j-1.5.8.zip 地址：http://www.slf4j.org/dist/slf4j-1.5.8.zip
找到5个jar包：

commons-fileupload-1.2.1.jar，commons-io-1.3.2.jar，fckeditor-java-core-2.4.1.jar，slf4j-api-1.5.8.jar，slf4j-simple-1.5.8.jar将所有jar包放到lib下，将fckeditor文件夹下的所有文件复制到项目目录下。fckeditor文件夹下是需要调用的页面和js文件等等，有各种版本，需要jsp

配置

1)在工程目录src/下新建一个文件fckeditor.properties，添加内容：
connector.userFilesPath=UploadFile
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl其中第一行为重新定义上传的文件夹,默认文件夹为userfile,保存即可。
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>

做好上面工作可以写JSP页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

String content=(String)request.getAttribute("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");
%>

<html>
<head>
    <base href="<%=basePath%>">
    
    <title>FCKEditor 测试</title>

</head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<body>
    <form method="post" name="frm1" action="servlet/SaveHtmlOffice">
    <script type="text/javascript">
        var oFCKeditor = new FCKeditor("edt1");
        oFCKeditor.BasePath = "fckeditor/";
        oFCKeditor.Height='400';
        oFCKeditor.Value="<%=content%>";
        oFCKeditor.Create();
    </script>
    <input type="submit" value="提交">
    </form>
    <hr>
    <%=content%>
</body>
</html>

后台

request.getParameter("edt1")获得编辑器的内容，转码到UTF-8(可以保存到数据库或html文件)

上传图片时候用到的类

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.velcro.base.AbstractAction;
import com.velcro.base.BaseContext;
import com.velcro.base.Baseconstant;
import com.velcro.base.IDGernerator;
import com.velcro.base.setitem.service.SetitemService;
import com.velcro.base.util.StringHelper;
import com.velcro.document.base.model.Attach;
import com.velcro.document.base.service.AttachService;

public class UploadFileAction implements AbstractAction{

public static final int SC_OK = 0;
public static final int SC_ERROR = 1;
public static final String ERROR_MESSAGE = "图片上传异常";
public static final String IMG_SHOWURL = Baseconstant.ROOT_DIR+"/ServiceAction/com.velcro.plugin.fckeditor.DownloadFileAction";

private SetitemService setitemService;
private AttachService attachService;

public void execute(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
   this.setitemService = (SetitemService) BaseContext.getBean(request,"setitemService");
   this.attachService = (AttachService) BaseContext.getBean(request,"attachService");
   String action = request.getParameter("action");
   if("uploadImg".equalsIgnoreCase(action)){
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html; charset=UTF-8");
    response.setHeader("Cache-Control", "no-cache");
    PrintWriter out = response.getWriter();
    String responseUrl = uploadImg(request, response);
    if(!StringHelper.isEmpty(responseUrl)){
     out.print(responseString(SC_OK,responseUrl));
    }else{
     out.print(responseString(SC_ERROR, null, null, ERROR_MESSAGE));
    }
    out.flush();
    out.close();
   }else if("uploadFlash".equalsIgnoreCase(action)){
    uploadFlash(request, response);
   }
}

private void uploadFlash(HttpServletRequest request, HttpServletResponse response){
  
}

/**
* FCKEditor上传图片
* @param request
* @param response
*/
private String uploadImg(HttpServletRequest request, HttpServletResponse response){
   FileItemFactory factory = new DiskFileItemFactory();
   ServletFileUpload upload = new ServletFileUpload(factory);
   List uploadedItems = null;
   FileItem fileItem = null;
   Attach attach = new Attach();
   String newFileName = IDGernerator.getUnquieID();
   String fileRootPath = setitemService.getSetitem("402881e80b7544bb010b754c7cd8000a").getItemvalue();//服务器目录 
   String uploadDir = "vfiles";
   SimpleDateFormat sf = new SimpleDateFormat("yyyyMM");
   String date = sf.format(new Date());
   char letter = (char) (Math.round((Math.random() * 100)) % 26 + (int) ('A'));  
   String filePathName = fileRootPath + "/" + uploadDir + "/" + date + "/" + letter;
   File filePath = new File(filePathName);
   if (!filePath.exists()) {
    filePath.mkdirs();
   }

   try {
    uploadedItems = upload.parseRequest(request);
    Iterator i = uploadedItems.iterator();//只支持单文件上传
    while (i.hasNext()) {
     fileItem = (FileItem) i.next();
     if (fileItem.isFormField() == false) {
      File uploadedFile = null;
      String fullFileName = fileItem.getName();
      String slashType = (fullFileName.lastIndexOf("\\") > 0) ? "\\" : "/";
      int startIndex = fullFileName.lastIndexOf(slashType);
      String fileName = fullFileName.substring(startIndex + 1, fullFileName.length());
      uploadedFile = new File(filePath, newFileName);
      fileItem.write(uploadedFile);
     
      attach.setObjname(fileName);
      attach.setFiletype(fileItem.getContentType());
      attach.setFiledir(uploadedFile.getAbsolutePath());
      attach.setIszip(0);
      attach.setIsencrypt(0);
      attach.setFilesize(fileItem.getSize());
      attachService.createAttach(attach);
     }
    }
    return IMG_SHOWURL+"?action=showImg&attachid="+attach.getId();
   } catch (Exception e) {
    return null;
   } 
}
/**
* @param arguments
* @return 图片上传成功后的返回值
*/
private String responseString(Object... arguments){
   Object[] parameters = new Object[arguments.length];
   System.arraycopy(arguments, 0, parameters, 0, arguments.length);
  
   StringBuffer sb = new StringBuffer(400);
   sb.append("<script type=\"text/javascript\">\n");
   sb.append("(function(){var d=document.domain;while (true){try{var A=window.parent.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();\n");
   sb.append("window.parent.OnUploadCompleted(");

   for (Object parameter : parameters) {
    if (parameter instanceof Integer) {
     sb.append(parameter);
    } else {
     sb.append("'");
     if (parameter != null)
      sb.append(parameter);
     sb.append("'");
    }
    sb.append(",");
   }

   sb.deleteCharAt(sb.length() - 1);
   sb.append(");\n");
   sb.append("</script>");
   return sb.toString();
}