<head>标签内引入
<script src="${ctx}/ckeditor/ckeditor.js" type="text/javascript"></script>
config.js配置文件
CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: config.language = ‘zh-cn‘; config.uiColor = ‘#AADC6E‘; config.image_previewText=‘ ‘; //预览区域显示内容 config.filebrowserWindowWidth = ‘440‘; config.filebrowserWindowHeight = ‘500‘; config.filebrowserImageUploadUrl = ‘upload.action‘; //定义图片上传的action config.filebrowserImageBrowseUrl = ‘browse.action?type=images‘; //定义浏览服务器图片的页面 };
浏览服务器图片页面代码browse.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="java.io.File"%> <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> <div> <% 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>"); } %> </div>
strut.xml配置
<!-- ckeditor浏览和上传图片 --> <action name="browse" class="noticeAction" method="browse" > <result name="success">/ckeditor/uploader/browse.jsp</result> </action>
后台代码,后台action不做处理,直接跳转到browse.jsp页面
//ckeditor上传图片和浏览图片 public String browse(){ System.out.println(this.getRequest().getContextPath()); System.out.println(ServletActionContext.getServletContext().getRealPath("ckeditor/uploader/upload/")); return SUCCESS; }
实际效果如下图:
上传图片action代码:
private File upload; private String uploadContentType; private String uploadFileName; private String CKEditorFuncNum; public String upload(){ String destPath = ServletActionContext.getServletContext().getRealPath("ckeditor/uploader/upload/images/"); System.out.println(destPath); File file=new File(destPath); if(!file.exists()) file.mkdirs(); System.out.println(file); try { System.out.println(uploadFileName); String uuid = UUID.randomUUID().toString(); String rt[] = uploadFileName.split("\\."); System.out.println(rt[1]); uploadFileName = new String(uuid+"."+rt[1]);//解决上传图片中文路径时服务器报错的问题。 FileUtils.copyFile(upload, new File(file,uploadFileName)); PrintWriter out = ServletActionContext.getResponse().getWriter(); out.write("<script type=‘text/javascript‘>window.parent.CKEDITOR.tools.callFunction("+CKEditorFuncNum+", ‘/admin/ckeditor/uploader/upload/images/" + uploadFileName + "‘, ‘‘);</script>"); } catch (IOException e) { e.printStackTrace(); } return Action.NONE; }
strut.xml配置无需result
<action name="upload" class="noticeAction" method="upload" > </action>
参考文章:
http://blog.csdn.net/mamba10/article/details/8543219
该文章中out.write写图片路径时前面少加了个应用名admin(你的web项目部署在服务器下的应用名),大家要注意
时间: 2024-11-12 17:05:52