(1)将下载的ckeditor解压后,将ckeditor拷贝到web根目录下
(2)在页面引入ckeditor的js
(3)在页面中使用如下:
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript">
window.οnlοad= function(){
//CKEDITOR.replace( 'editor1' );
CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl : '../ckeditor/showImge.do?Type=Image',
filebrowserUploadUrl : '../ckeditor/upload.do?Type=Image'
});
};
function getData(){
//前台获取ckeditor的内容
var editor_data = CKEDITOR.instances.editor1.getData();
alert(editor_data);
if(data != null){
return true ;
}
}
</script>
</head>
<body>
<form action="../ckeditor.do" method="post" οnsubmit="getData()">
<label for="editor1">Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
<input type="submit" value="Submit" />
<%--
<ckeditor:replace replace="editor1" basePath="/ckeditor/"></ckeditor:replace>
--%>
</form>
</body>
</html>
(4)后台对上传和浏览服务器的支持
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class UploadController {
/*
* 通用的页面跳转
*/
@RequestMapping(value = "/redirect/{path}.do")
public String redirect(@PathVariable String path) {
System.out.println("go to page " + path);
return path;
}
/*
* ckeditor上传
*/
@RequestMapping(value = "/ckeditor/upload.do", method = RequestMethod.POST)
public void fileUpload(HttpServletRequest request,
HttpServletResponse response, @RequestParam MultipartFile upload) {
OutputStream out = null;
PrintWriter printWriter = null;
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
try {
String fileName = upload.getOriginalFilename();
byte[] bytes = upload.getBytes();
String uploadPath = getUploadpath(request) + "upload\\" + fileName;
System.out.println(uploadPath);
out = new FileOutputStream(new File(uploadPath));
out.write(bytes);
String callback = request.getParameter("CKEditorFuncNum");
System.out.println("callback:" + callback);
printWriter = response.getWriter();
String filePath = request.getContextPath() + "/upload/" + fileName;
printWriter
.println("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
+ callback
+ ",'"
+ filePath
+ "',''"
+ ")</script>");
printWriter.flush();
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if (out != null) {
out.close();
}
if (printWriter != null) {
printWriter.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
return;
}
/*
* ckeditor浏览服务器
*/
@RequestMapping(value = "ckeditor/showImge.do")
public void showImage(HttpServletRequest request,
HttpServletResponse response) {
PrintWriter out = null;
List<String> fileList = new ArrayList<String>();
try {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String filePath = getUploadpath(request) + "upload\\";
out = response.getWriter();
File file = new File(filePath);
String callback = request.getParameter("CKEditorFuncNum");
out.println("<script type='text/javascript' src='../ckeditor/ckeditor.js'></script>");
out.println("<script>");
out.println("function choose(obj){");
out.println("window.opener.CKEDITOR.tools.callFunction(" + callback
+ ",obj)");
out.println("window.close();");
out.println("}");
out.println("</script>");
out.println("<h2>单击图片进行选择</h2>");
if (file.exists()) {
File[] files = file.listFiles();
for (File file2 : files) {
fileList.add(file2.getName());
String fileName = file2.getName();
fileName = "../upload/" + fileName;
out.println("<img src='" + fileName + "' οnclick=\""
+ "choose('" + fileName + "')\">");
out.flush();
}
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (out != null) {
out.close();
}
}
return;
}
/*
* 后台获取ckeditor提交的内容
*/
@RequestMapping(value = "ckeditor.do")
public ModelAndView ckeditorAction(@RequestParam String editor1) {
ModelAndView modelAndView = new ModelAndView("ckeditorSuccess");
try {
editor1 = new String(editor1.getBytes("iso-8859-1"), "utf-8");
System.out.println("content:" + editor1);
modelAndView.addObject("editor1", editor1);
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
return modelAndView;
}
// 获得服务器的上传路径
public String getUploadpath(HttpServletRequest request) {
String path = "";
path = request.getSession().getServletContext().getRealPath("/");
return path;
}
}