ckedit 浏览图片和上传图片

<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

ckedit 浏览图片和上传图片的相关文章

上传图片前浏览图片

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus

Android 自定义Gallery浏览图片

之前写的<Android ImageSwitcher和Gallery的使用>一文中提到我在教室一下午为实现那个效果找各种资料.期间在网上找了一个个人觉得比较不错的效果,现在贴图上来: 其实这个效果使用的知识点就是图像的获取.创建.缩放.旋转.Matrix类.Canvas类等,另外就是自定义的Gallery控件. 相信大家都期待马上上代码了吧,嘻嘻.(注释比较多,相信大家都能看懂.) main.xml: <?xml version="1.0" encoding=&quo

ios学习-制作一个浏览图片的Demo

一.项目要求:制作一个浏览图片的Demo,要求包含夜间模式,以及改变图片大小,能够显示不同的图片描述 二.开发步骤: 1.在storyboard上添加一个空白的View,然后添加”设置“按钮,添加image View,图片序号Label,图片描述Label,更改图片Slider控件. 2.编写sliderValueChanged方法 3.在storyboard再添加一个空白的View,在新增的View上面添加Switch控件,用于夜间模式,添加Slider控件,用于改变图片的大小. 4.编写se

wpf 模拟3D效果(和手机浏览图片效果相似)(附源码)

原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依赖属性也不介绍.),个人认为,依赖属性这个东西,有百分之五十是为了3D而存在.(自己写的类似于demo的东西)先上图,无图无真相这是demo的整个效果图,可以用鼠标移动,触摸屏也可以手指滑动,图片会移动,然后移动结束,会有一个回弹的判断. <Window x:Class="_3Dshow.Wi

作品2:资源管理器EX(原味浏览图片)

续http://www.cnblogs.com/qingjun1991/p/4971689.html 一直找不到能原汁原味地浏览图片的浏览器,后来我自己做出来了,集成到这个软件 所谓的原味,就是图片中的一个点,放大时这个点变成多个颜色一样的点(用最邻近插值法解决),缩小时这个点不会消失不见(用高质量的双三次插值法解决) .net自带的最邻近插值法达不到我的要求,所以我自己写了一个,缺点是只能倍数放大,但效果很好,我称它为原味法

Camera图片特效处理综述(Bitmap的Pixels处理、Canvas/paint的drawBitmap处理、旋转图片、裁截图片、播放幻灯片浏览图片&lt;线程固定时间显示一张&gt;)

一种是直接对Bitmap的像素进行操作,如:叠加.边框.怀旧.(高斯)模糊.锐化(拉普拉斯变换). Bitmap.getPixels(srcPixels, 0, width, 0, 0, width, height); newR = (int) (pixR * alpha + layR * (1 - alpha));    newR = Math.min(255, Math.max(0, newR));    ...    srcPixels[pos] = Color.argb(newA, ne

Android浏览图片,点击放大至全屏效果

最近做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果.如下. 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略界面跳转到图片详情页面,应该是从一个Activity跳转到另外一个Activity,应该图片详情页面也有很多操作,用View或者Dialog不是很好.所以现在难点就是,如何使得前一个界面的ImageView在另外一个界面做缩放切割动画. 一般缩略界面的ImageView的是如上图所示的正方形的,并且是CENT

ckeditor在图像属性加入浏览图片

<!DOCTYPE html><!--Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.For licensing, see LICENSE.md or http://ckeditor.com/license--><html><head> <meta charset="GB2312"> <title>jLogic-C

Swift - 使用CollectionView实现图片Gallery画廊效果(左右滑动浏览图片)

1,效果图 (1)图片从左至右横向排列(只有一行),通过手指拖动可以前后浏览图片. (2)视图滚动时,每张图片根据其与屏幕中心距离的不同,显示尺寸也会相应地变化.越靠近屏幕中心尺寸就越大,远离屏幕中心的就逐渐变小. (3)滑动结束后,会有位置自动修正的功能.即将当前最靠近屏幕中点的图片移动到正中央. (4)点击图片则将该图片删除,点击空白处会在最开始的位置插入一张图片.不管新增还是删除都有动画效果. (5)点击导航栏上的"切换"按钮,可以在普通的流式布局和我们自定义的画廊布局间相互切换