ckeditor上传图片

环境：

Struts2框架+ckeditor富文本编辑器 （我用的是ckeditor_4.6.2_full。可以去http://ckeditor.com/download上下，或者https://pan.baidu.com/s/1slsAz4x）

---

step1：

如果是从官网下过来的ckeditor是不可以直接上传图片的，需要进行配置。（百度云上是已经配置好的）

1.找到 ckeditor\plugins\image\dialogs\imge.js ,查找Upload

//上传按钮ckeditor默认是隐藏的，这里让按钮显示出来
将 id:"Upload",hidden:!0  修改为  id:"Upload",hidden:0

2.在ckeditor\config.js中添加请求Action（处理上传图片请求）

CKEDITOR.editorConfig = function( config ){
    //这是处理图片上传的请求
    config.fileborwserUploadUrl="img/imgUpload";
}

---

step2:

创建项目，配置struts2环境，将ckeditor文件复制到WebRoot中，完整项目如图

img/upload是为了存放上传的图片（上传的图片在服务器端而不在开发环境中，在这里建立文件夹就不用专门去服务器端新建了）

图片实际存放位置 \WorkSpace\.metadata\.me_tcat\webapps\ck\img\upload

textUpload和success.jsp是我用来处理ckeditor整体文章的，这里可以不创建

step3:

index.jsp中使用ckeditor

1.导入ckeditor的核心js：

<script src="<%=basePath%>ckeditor/ckeditor.js"></script>

2.引用多行文本框：

<textarea name="editor"></textarea>或<div id="editor"></div>

3.在文本框下加一句js代码:

<script>CKEDITOR.replace('editor');</script>

js代码作用：将<textarea>控件替换成编辑器的代码。ckeditor.js会按照replace中的值在<div>或<textarea>中按先name后id属性来查找控件并替换为ckeditor代码。

CKEDITOR.replace中可以对编辑器进行配置，这里就不详写了，有兴趣可以去百度。

---

step4:

接下来是后台数据的上传处理，包括对上传文件的格式和大小进行限制

1.struts.xml配置

<!-- 建立映射 class中放处理图片的控制层文件地址 -->
<package name="img" namespace="/img" extends="struts-default">
    <action name="imgUpload" class="com.cwj.imgUpload"></action>
</package>

2.imgUpload.java完整代码

package com.cwj.contoller;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class imgUpload extends ActionSupport{
    private File upload;
    private String uploadContentType;
    private String uploadFileName;

    public String execute() throws Exception{
        HttpServletResponse resp=ServletActionContext.getResponse();
        resp.setCharacterEncoding("utf8");
        PrintWriter out=resp.getWriter();
        //ckeditor提交的参数，与返回有关
        String callback=ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
        //图片格式字典
        String[] imgWordBook={"jpg",".png",".gif",".bmp",".jpeg"};
        //分割文件名
        String[] fileName=uploadFileName.split("\\.");
        //得到文件扩展名
        String expandedName="."+fileName[1];
        //判断是否为图片
        boolean flag=false;
        for(String iwb:imgWordBook){
            if(expandedName.equals(iwb)){
            flag=true;
            }
        }
        if(!flag){
            out.println("<script>");    
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件格式不正确（必须为.jpg/.jpeg/.gif/.bmp/.png文件）');");   
            out.println("</script>");  
            return null;
        }
        //判断大小是否符合要求
        if(upload.length()>600*1024){
            out.println("<script>");
            out.println("window.parent.CKEDITOR.tools.callFunction("+callback+",'',"+"'文件大小不得大于600k');");
            out.println("</script>");
            return null;
        }

        //上传文件到服务器

        //输入流 从服务器端临时文件中得到数据
        InputStream is=new FileInputStream(upload);
            //设置存放路径
        String savePath=ServletActionContext.getServletContext().getRealPath("/img/upload");
            //为图片随机取名
        String rName=java.util.UUID.randomUUID().toString();
        rName+=expandedName;
            //在服务端用File类建立文件
        File toFile=new File(savePath,rName);
        //输出流 从临时文件中得到的数据输出到上面File类建立的文件中
        OutputStream os=new FileOutputStream(toFile);
        //每次循环写入1024B=1KB
        byte[] buffer=new byte[1024];
        int length=0;
        //写入过程
        while((length=is.read(buffer))>0){
            os.write(buffer,0,length); 
        }
        //输入、输出流关闭
        is.close();
        os.close();

        //返回URL
        out.println("<script>");
            out.println("window.parent.CKEDITOR.tools.callFunction("+callback+",'img/upload/"+rName+"','')");
        out.println("</script>");   
        return null;
    }

    public File getUpload() {
        return upload;
    }
    public void setUpload(File upload) {
        this.upload = upload;
    }
    public String getUploadContentType() {
        return uploadContentType;
    }
    public void setUploadContentType(String uploadContentType) {
        this.uploadContentType = uploadContentType;
    }
    public String getUploadFileName() {
        return uploadFileName;
    }
    public void setUploadFileName(String uploadFileName) {
        this.uploadFileName = uploadFileName;
    }
}

如果上面都成功的话，这时候已经能上传图片了。