CkEditor使用

最新推荐文章于 2023-03-27 15:40:31 发布

sust2012

最新推荐文章于 2023-03-27 15:40:31 发布

阅读量3.2k

点赞数

分类专栏： jquery ckeditor 文章标签： CKEditor ckeditor

本文链接：https://blog.csdn.net/sust2012/article/details/8495609

版权

jquery ckeditor 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

（1）将下载的ckeditor解压后，将ckeditor拷贝到web根目录下

（2）在页面引入ckeditor的js

（3）在页面中使用如下：

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>

<label for="editor1">Editor 1:</label>

<%-- <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;
}
}

sust2012

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CkEditor使用

（1）将下载的ckeditor解压后，将ckeditor拷贝到web根目录下（2）在页面引入ckeditor的js（3）在页面中使用如下： window.onload= function(){//CKEDITOR.replace( 'editor1' ); CKEDITOR.replace( 'editor1',{filebrowser
复制链接

扫一扫