ckeditor 图片上传

最新推荐文章于 2024-09-11 10:46:29 发布

最新推荐文章于 2024-09-11 10:46:29 发布 · 136 阅读

文章标签：

#Servlet #fckeditor #JavaScript #JSP #CSS #ViewUI

本文介绍如何在项目中集成CKEditor富文本编辑器，并实现图片上传功能。具体步骤包括下载并部署CKEditor，修改JSP页面引入JS文件，替换textarea标签为CKEditor组件，以及开发上传图片的Servlet。

如何配置与使用CKEDITOR
安装：　
1.　下载CKEDITOR的文件，解压后复制到工程的WEBROOT目录下就OK！
引用CKEDITOR的JS文件：
2.新建JSP页面，添加其JS文件
<link rel="stylesheet" type="text/css" href="richtext.css">
<script type="text/javascript" src="<%=basePath%>/fckeditor/ckeditor.js"></script>
<script type="text/javascript" src="<%=basePath%>/fckeditor/richtext.js"></script>

替换textarea标签：
<textarea rows="15" cols="40" name="Content" ></textarea>
    <script type="text/javascript">
     var uri = encodeURIComponent("/upload/");
CKEDITOR.replace( 'Content' ,{
   filebrowserImageUploadUrl : 'servlet/uploadImage?filePath='+uri   // 点击上传到服务器会执行uploadImage这个servlet
    });
               </script>

// uploadImage servlet

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.jsp.JspFactory;

import com.jspsmart.upload.SmartUpload;

public class uploadImage extends HttpServlet {

/**
* Constructor of the object.
*/
public uploadImage() {
super();
}

/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

            doPost(request,response);
}

/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");
PrintWriter out = response.getWriter();
String filePath = request.getParameter("filePath");

   JspFactory   _jspxFactory   =   JspFactory.getDefaultFactory();
   javax.servlet.jsp.PageContext   pageContext   =
                                                                   _jspxFactory.getPageContext(
                                                                                   this,
                                                                                   request,
                                                                                   response,
                                                                                   null,
                                                                                   true,
                                                                                   8192,
true);

try{
   SmartUpload mySmartUpload = new SmartUpload();
   //初始化
   mySmartUpload.initialize(pageContext);
   //设置某个文件上传的最大值
   mySmartUpload.setMaxFileSize(1*512*1024);
   // 设置总共上传文件的最大值
   mySmartUpload.setTotalMaxFileSize(3*1024*1024);
   // 设置上传文件的范围
   mySmartUpload.setAllowedFilesList("bmp,gif,jpg");

   // 上传文件
   mySmartUpload.upload();

String path = request.getRealPath("/").replace( "\\","/")+filePath; // 获取服务器的路径

   // 处理每一个文件
   for (int i=0;i<mySmartUpload.getFiles().getCount();i++){
   com.jspsmart.upload.File file = mySmartUpload.getFiles().getFile(i);

   // 判断浏览框是否有文件
   if (!file.isMissing()){
      file.saveAs(filePath+file.getFileName(),mySmartUpload.SAVE_VIRTUAL);
   }

String returnString = "<script type=\"text/javascript\">"
+ "window.parent.CKEDITOR.tools.callFunction(1, '"+path+file.getFileName()+"', '');</script>";

out.println(returnString);
   }


}catch(Exception ex){
System.out.println(ex.toString());

}


}

/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}

}