上海工业网站建设/市场监督管理局上班时间
项目结构如下：
准备工作：http://ckeditor.com/download下载ckeditor(本例中使用的是3.2版本),下载完后，解压拷贝到WebContent目录下，导入smartupload.jar包，用于处理图片和视频的上传。创建upload文件夹用于存放图片和上传的视频。
①修改ckeditor目录下的config.js文件
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.language='zh-cn';//配置语言
config.uiColor='#FFF';//背景颜色
config.width="auto";//宽度
config.height='300px';//高度
config.skin='office2003';
config.toolbar='Full';//工具栏风格Full,Basic
config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;'+config.font_names;//将中文字体添加到字体列表
};
②index.jsp页面如下：
pageEncoding="UTF-8"%>
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
在线编辑器CKeditor的应用在线编辑器CKeditor的应用
CKEDITOR.replace('editor2',{
filebrowserImageUploadUrl:'fileUpload?type=image',
filebrowserFlashUploadUrl:'fileUpload?type=flash'
});
function checkEditor(){
var editor_data = CKEDITOR.instances.editor2.getData();
if(editor_data == ""){
alert("编辑器内容不能为空，请输入具体内容后提交");
return false;
}else
return true;
}
③CKeditorFileUpload.java代码如下：(处理图片和视频的上传)
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.lxh.smart.SmartUpload;
public class CKeditorFileUpload extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html");
PrintWriter out = resp.getWriter();
resp.setCharacterEncoding("utf-8");
req.setCharacterEncoding("utf-8");
StringBuffer sb = new StringBuffer();
sb.append("
String type=req.getParameter("type");
String allowList = "rar,zip";
String errMsg = "对不起，文件上传失败！";
if(type.equalsIgnoreCase("image")){
allowList = "gif,jpg,png,bmp,tif";
}else if(type.equalsIgnoreCase("video")){
allowList = "flv";
}else if(type.equalsIgnoreCase("flash")){
allowList = "swf";
}
String basePath = getServletContext().getRealPath("/upload").replaceAll("\\\\", "/");
try {
ServletConfig config = getServletConfig();
SmartUpload mySmartUpload = new SmartUpload();
mySmartUpload.initialize(config,req,resp);
mySmartUpload.setAllowedFilesList(allowList);
mySmartUpload.upload();
//实现文件上传
if(mySmartUpload.getFiles().getFile(0).getFileName().trim().length()>0){
System.out.println(new String(mySmartUpload.getFiles().getFile(0).getFileName().getBytes(),"utf-8"));
String fileName = String.valueOf(System.currentTimeMillis())+"."+mySmartUpload.getFiles().getFile(0).getFileExt();
mySmartUpload.getFiles().getFile(0).saveAs(basePath+"/"+fileName);
//上传成功后返回文件的引用地址
sb.append("window.parent.CKEDITOR.tools.callFunction(1,'"+req.getContextPath()+"/upload/"+fileName+"');\n");
}else{
//为选择上传文件时提示错误信息
errMsg = "对不起，文件不能为空，请选择文件后上传！";
errMsg = new String(errMsg.getBytes(),"utf-8");
sb.append("window.parent.CKEDITOR.tools.callFunction(1,'"+errMsg+"');\n");
}
} catch (Exception e) {
e.printStackTrace();
errMsg = new String(errMsg.getBytes(),"iso8859-1");
sb.append("window.parent.CKEDITOR.tools.callFunction(1,'"+errMsg+"');\n");
}
sb.append("\n");
out.println(sb.toString());
out.flush();
out.close();
}
}
④CKeditorContextSave.java代码如下：(将输入的内容保存后显示，此处实例没保存直接显示)
package com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CKeditorContextSave extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException ,IOException {
req.setCharacterEncoding("utf-8");
String context = req.getParameter("editor2");
System.out.println(context);
req.setAttribute("context", context);
req.getRequestDispatcher("process.jsp").forward(req, resp);
};
}
⑤web.xml文件：
CKeditorFileUpload
com.servlet.CKeditorFileUpload
CKeditorFileUpload
/fileUpload
CKeditorContextSave
com.servlet.CKeditorContextSave
CKeditorContextSave
/CKeditorContextSave
/index.jsp
⑥process.jsp代码如下:(仅用于显示输入的内容)
pageEncoding="UTF-8"%>
Insert title hereString context = (String)request.getAttribute("context");
out.println(context);
%>
⑦效果如下：
点击提交后：
