关于ckeditor的深入学习
来源:互联网 发布:python google 规范 编辑:程序博客网 时间:2024/05/16 14:33
让CKEDITOR支持JSP上传
很早以前就想把CKEditor在JSP下的图片上传及浏览服务器图片的方法写下来了,不过因为教学项目中要用到,担心HEM直接套用,自己不去调查(我可是用心良苦啊),不能很好的锻炼,一直没写出来,今天项目开始测试了,他们的功能也都基本可以结束了,我也可以发我的帖了。
写这个的起因是在网上一仁兄的帖子,抱怨说CKEditor不支持JSP了,感叹了许多,说支持ASP、PHP,就是不支持JSP,于是俺也在网上找了找JSP方面的资料,看来确实不支持了,不过人家也是有道理的,毕竟JSP上传的图片,不能简单的用个JSP就随便搞搞就O了。
关于CKEditor在JSP下上传图片的方法,网上有很多,大都是写了一大堆JS代码然后自己注册一个事件,写的太多,我没怎么看懂,不过有一位大侠写的让我看到了简单写法的曙光(不过遗憾的是,时间太长了,不知道大侠的URL了)。
言归正传,对于上传CKEditor已经做好了,我们只要准备个功能,接收CKEditor提交过来的文件就可以了,所以呢实现的思路是:
- 准备一下JSP上传文件的JAR包:commons-fileupload.jar和commons-io.jar
- 编写一个JSP用于接收上传的文件(这里除上传图片功能外,需调用一个核心JS语句)
- 编写一个JSP用于浏览文件(这里除上传图片功能外,需调用一个核心JS语句)
- 修改CKEditor的config.js,将上传文件和浏览文件的JSP配置进去
说明一下,之所以采用JSP没有使用Servlet,那是因为JSP简单啊,这样可以降低CKEditor对项目的侵入性啊。下面看代码啦:
用于接收上传的文件的JSP:
- <%@page import="java.io.File"%>
- <%@page import="java.util.UUID"%>
- <%@page import="org.apache.commons.fileupload.FileItem"%>
- <%@page import="java.util.List"%>
- <%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
- <%@page import="org.apache.commons.fileupload.FileItemFactory"%>
- <%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
- <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <title>JSP上传文件</title>
- </head>
- <body>
- <%
- String path = request.getContextPath() + "/";
- if(ServletFileUpload.isMultipartContent(request)){
- String type = "";
- if(request.getParameter("type") != null)//获取文件分类
- type = request.getParameter("type").toLowerCase() + "/";
- String callback = request.getParameter("CKEditorFuncNum");//获取回调JS的函数Num
- FileItemFactory factory = new DiskFileItemFactory();
- ServletFileUpload servletFileUpload = new ServletFileUpload(factory);
- servletFileUpload.setHeaderEncoding("UTF-8");//解决文件名乱码的问题
- List<FileItem> fileItemsList = servletFileUpload.parseRequest(request);
- for (FileItem item : fileItemsList) {
- if (!item.isFormField()) {
- String fileName = item.getName();
- fileName = "file" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));
- //定义文件路径,根据你的文件夹结构,可能需要做修改
- String clientPath = "ckeditor/uploader/upload/" + type + fileName;
- //保存文件到服务器上
- File file = new File(request.getSession().getServletContext().getRealPath(clientPath));
- if (!file.getParentFile().exists()) {
- file.getParentFile().mkdirs();
- }
- item.write(file);
- //打印一段JS,调用parent页面的CKEditor的函数,传递函数编号和上传后文件的路径;这句很重要,成败在此一句
- out.println("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("+callback+",'"+path+clientPath+"')</script>");
- break;
- }
- }
- }
- %>
- </body>
- </html>
用于浏览文件的JSP:
- <%@page import="java.io.File"%>
- <%@ page language="java" contentType="text/html; charset=GB18030"
- pageEncoding="GB18030"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <title>图片浏览</title>
- <script type="text/javascript">
- //这段函数是重点,不然不能和CKEditor互动了
- function funCallback(funcNum,fileUrl){
- var parentWindow = ( window.parent == window ) ? window.opener : window.parent;
- parentWindow.CKEDITOR.tools.callFunction(funcNum, fileUrl);
- window.close();
- }
- </script>
- </head>
- <body>
- <%
- String path = request.getContextPath() + "/";
- String type = "";
- if(request.getParameter("type") != null)//获取文件分类
- type = request.getParameter("type").toLowerCase() + "/";
- String clientPath = "ckeditor/uploader/upload/" + type;
- File root = new File(request.getSession().getServletContext().getRealPath(clientPath));
- if(!root.exists()){
- root.mkdirs();
- }
- String callback = request.getParameter("CKEditorFuncNum");
- File[] files = root.listFiles();
- if(files.length > 0){
- for(File file:files ) {
- String src = path + clientPath + file.getName();
- out.println("<img width='110px' height='70px' src='" + src + "' alt='" + file.getName() + "' onclick=\"funCallback("+callback+",'"+ src +"')\">");
- }
- }else{
- out.println("<h3>未检测到资源。</h3>");
- }
- %>
- </body>
- </html>
修改后的CKEditor的config.js:
- CKEDITOR.editorConfig = function( config )
- {
- config.language = 'zh-cn';
- config.filebrowserBrowseUrl = 'ckeditor/uploader/browse.jsp';
- config.filebrowserImageBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Images';
- config.filebrowserFlashBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Flashs';
- config.filebrowserUploadUrl = 'ckeditor/uploader/upload.jsp';
- config.filebrowserImageUploadUrl = 'ckeditor/uploader/upload.jsp?type=Images';
- config.filebrowserFlashUploadUrl = 'ckeditor/uploader/upload.jsp?type=Flashs';
- config.filebrowserWindowWidth = '640';
- config.filebrowserWindowHeight = '480';
- }
OK,修改完毕。简单吧,其实上传和浏览文件很简单(上面只是一个演示,代码仅供参考),要点是要调用一下CKEDITOR.tools.callFunction方法。
附件打包了一个可运行的Eclipse工程,供需要的朋友参考。
- 关于ckeditor的深入学习
- CKEditor的基础学习
- 关于SQLite的深入学习
- CKEditor结合CKfinder的学习
- ckeditor插件的基础学习
- ckeditor中关于模板的自定义
- [转载] 关于ckEditor 的一些小知识
- 关于thinkphp5的上传图片和ckeditor
- 学习ckeditor
- ckeditor 学习
- ckeditor学习
- 关于C++深入学习的问题
- 关于 curl 命令的深入学习
- IBM 关于 Java 深入学习的技术资料
- 关于序列化的深入学习
- 关于理解重载的深入学习
- 【CKEditor】CKEditor 重置的实现
- 【CKEditor 】CKEditor 图片的上传
- oracle 分页技术
- udp 发送一个整形数 udpserver.c
- Objective-C中NSValue的使用
- 图片产生倒映(位图的使用)
- ffmpeg开发指南(使用 libavformat 和 libavcodec)
- 关于ckeditor的深入学习
- CryptoAPI与openssl RSA非对称加密解密(PKCS1 PADDING)交互
- Android源码开发(2)---- 编译Android源码并用模拟器加载运行
- WP7 示例代码大全
- php history.back返回后表单数据丢失的解决办法
- Top 150 Questions - 1.3
- 线段树(1)
- 进程的三种状态及转换
- Butterfly BUG 之一 ------自动篡改multiselection 的值