如何配置与使用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
}
}
详细界面在word文档中,附件有word,jspSmartupload.jar 和ckeditor包