CKeditor上传图片实现所见即所得界面

迟了好多天的分享，CKeditor这个编辑器虽然不错，但也真苟啊，搞图片上传这个功能，快给我搞佛系了，话不多说，上代码

1、首先去官网下载一个full的版本，我用的是CKeditor 4.13，解压之后放在webcontent下边

2、在你要用的界面添加下这个

引入ckeditor编辑器

3.还有这个，这是加载文本编辑器的

     <script type="text/javascript">

            CKEDITOR.replace('editor',{filebrowserUploadUrl : '${path}/ckeditor/uploader?Type=File',

            filebrowserImageUploadUrl : '${path}/ckeditor/uploader?Type=Image',

            filebrowserFlashUploadUrl : '${path}/ckeditor/uploader?Type=Flash'

            });
        </script>

这个是你自己的路径，

5.这个是那个上传链接里边的ckeditor文件夹（并不是下载的文本编辑器的文件），处理上传的图片文件，

CKEditorUploadServlet.java

package ckeditor;


import java.io.*;
import java.text.SimpleDateFormat;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class CKEditorUploadServlet extends HttpServlet {
    private static String baseDir;// CKEditor根目录
    private static boolean debug = false;// 是否debug模式  
    private static boolean enabled = false;// 是否开启CKEditor上传  
    private static Hashtable allowedExtensions;//允许的上传文件扩展名  
    private static Hashtable deniedExtensions;// 阻止的上传文件扩展名  
    private static SimpleDateFormat dirFormatter;//目录命名格式:yyyyMM  
    private static SimpleDateFormat fileFormatter;//文件命名格式:yyyyMMddHHmmssSSS  
    /**
     * Servlet初始化方法
     */
    public void init() throws ServletException {
        // 从web.xml中读取debug模式  
        debug = (new Boolean(getInitParameter("debug"))).booleanValue();
        if (debug)
            System.out.println("\r\n---- SimpleUploaderServlet initialization started ----");
     // 格式化目录和文件命名方式 
        dirFormatter = new SimpleDateFormat("yyyyMM");
        fileFormatter = new SimpleDateFormat("yyyyMMddHHmmssSSS");
        // 从web.xml中获取根目录名称  
        baseDir = getInitParameter("baseDir");
        // 从web.xml中获取是否可以进行文件上传  
        enabled = (new Boolean(getInitParameter("enabled"))).booleanValue();
        if (baseDir == null)
            baseDir = "/UserFiles/";
        String realBaseDir = getServletContext().getRealPath(baseDir);
        File baseFile = new File(realBaseDir);
        if (!baseFile.exists()) {
            baseFile.mkdirs();
        }
        // 实例化允许的扩展名和阻止的扩展名  
        allowedExtensions = new Hashtable(3);
        deniedExtensions = new Hashtable(3);
        // 从web.xml中读取配置信息  
        allowedExtensions.put("File",
        stringToArrayList(getInitParameter("AllowedExtensionsFile")));
        deniedExtensions.put("File",
        stringToArrayList(getInitParameter("DeniedExtensionsFile")));
        allowedExtensions.put("Image",
    stringToArrayList(getInitParameter("AllowedExtensionsImage")));
        deniedExtensions.put("Image",           stringToArrayList(getInitParameter("DeniedExtensionsImage")));
        allowedExtensions.put("Flash",          stringToArrayList(getInitParameter("AllowedExtensionsFlash")));
        deniedExtensions.put("Flash",           stringToArrayList(getInitParameter("DeniedExtensionsFlash")));
        if (debug)
            System.out.println("---- SimpleUploaderServlet initialization completed ----\r\n");
    }
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        if (debug)
            System.out.println("--- BEGIN DOPOST ---");
        //response.setContentType("text/html; charset=UTF-8");
        response.setContentType("text/json; charset=utf-8");
        response.setHeader("Cache-Control", "no-cache");
        PrintWriter out = response.getWriter();
        // 从请求参数中获取上传文件的类型：File/Image/Flash  
        String typeStr = request.getParameter("Type");
        if (typeStr == null) {
            typeStr = "File";
        }
        if (debug)
            System.out.println(typeStr);
        // 实例化dNow对象，获取当前时间  
        Date dNow = new Date();
        // 设定上传文件路径  
        String currentPath = baseDir + typeStr + "/"
                + dirFormatter.format(dNow);
        // 获得web应用的上传路径  
        String currentDirPath = getServletContext().getRealPath(currentPath);
        // 判断文件夹是否存在，不存在则创建
        File dirTest = new File(currentDirPath);
        if (!dirTest.exists()) {
            dirTest.mkdirs();
        }
        // 将路径前加上web应用名  
        currentPath = request.getContextPath() + currentPath;
        if (debug)
            System.out.println(currentDirPath);
        // 文件名和文件真实路径  
        String newName = "";
        String fileUrl = "";
        if (enabled) {
            // 使用Apache Common组件中的fileupload进行文件上传  
            FileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            try {
                List items = upload.parseRequest(request);
                Map fields = new HashMap();
                Iterator iter = items.iterator();
                while (iter.hasNext()) {
                    FileItem item = (FileItem) iter.next();
                    if (item.isFormField())
                        fields.put(item.getFieldName(), item.getString());
                    else
                        fields.put(item.getFieldName(), item);
                }
                // CEKditor中file域的name值是upload 
                FileItem uplFile = (FileItem) fields.get("upload");
             // 获取文件名并做处理  
                String fileNameLong = uplFile.getName();
                fileNameLong = fileNameLong.replace('\\', '/');
                String[] pathParts = fileNameLong.split("/");
                String fileName = pathParts[pathParts.length - 1];
                // 获取文件扩展名  
                String ext = getExtension(fileName);
                // 设置上传文件名  
                fileName = fileFormatter.format(dNow) + "." + ext;
                // 获取文件名(无扩展名)   
                String nameWithoutExt = getNameWithoutExtension(fileName);
                File pathToSave = new File(currentDirPath, fileName);
                fileUrl = currentPath + "/" + fileName;
                if (extIsAllowed(typeStr, ext)) {
                    int counter = 1;
                    while (pathToSave.exists()) {
                        newName = nameWithoutExt + "_" + counter + "." + ext;
                        fileUrl = currentPath + "/" + newName;
                        pathToSave = new File(currentDirPath, newName);
                        counter++;
                    }
                    uplFile.write(pathToSave);
                } else {
                    if (debug)
                        System.out.println("无效的文件类型 " + ext);
                }
            } catch (Exception ex) {
                if (debug)
                    ex.printStackTrace();
            }
        } else {
            if (debug)
                System.out.println("未开启CKEditor上传功能");
        }
        // CKEditorFuncNum是回调时显示的位置，这个参数必须有  
        String callback = request.getParameter("CKEditorFuncNum");
        System.out.println(request.getParameter("CKEditorFuncNum"));
        System.out.println(request.getParameter("CKEditor"));
        System.out.println(request.getParameter("langCode"));

        String json="{\"uploaded\" : 1, \"fileName\" : \"fileNameStr\", \"url\":\""+fileUrl+"\" , \"error\" : { \"message\":\"successful\" } }";
        out.println(json);
        out.flush();
         out.close();



       // out.println("<script type=\"text/javascript\">");
      //  out.println("window.parent.CKEDITOR.tools.callFunction(" + "'1'"
               // + ",'" + fileUrl + "',' '涓婁紶鎴愬姛fdfdfdf''" + ")");
      //  out.println("</script>");
      //  out.flush();
       // out.close();  
        System.out.println("callback-->"+callback);
        System.out.println("fileUrl-->"+json);
       // response.sendRedirect(request.getContextPath()+"/ATextDao?a="+fileUrl);
        if (debug)
            System.out.println("--- END DOPOST ---");
    }
    /**
     * 获取文件名的方法
     */
    private static String getNameWithoutExtension(String fileName) {
        return fileName.substring(0, fileName.lastIndexOf("."));
    }
    /**
     * 获取扩展名的方法
     */
    private String getExtension(String fileName) {
        return fileName.substring(fileName.lastIndexOf(".") + 1);
    }
    /**
     * 字符串像ArrayList转化的方法
     */
    private ArrayList stringToArrayList(String str) {
        if (debug)
            System.out.println(str);
        String[] strArr = str.split("\\|");
        ArrayList tmp = new ArrayList();
        if (str.length() > 0) {
            for (int i = 0; i < strArr.length; ++i) {
                if (debug)
                    System.out.println(i + " - " + strArr[i]);
                tmp.add(strArr[i].toLowerCase());
            }
        }
        return tmp;
    }
    /**
     * 判断扩展名是否允许的方法
     */
    private boolean extIsAllowed(String fileType, String ext) {
        ext = ext.toLowerCase();
        ArrayList allowList = (ArrayList) allowedExtensions.get(fileType);
        ArrayList denyList = (ArrayList) deniedExtensions.get(fileType);
        if (allowList.size() == 0) {
            if (denyList.contains(ext)) {
                return false;
            } else {
                return true;
            }
        }
        if (denyList.size() == 0) {
            if (allowList.contains(ext)) {
                return true;
            } else {
                return false;
            }
        }
        return false;
    }
}

web.xml

<servlet>
    <servlet-name>SimpleUploader</servlet-name>
    <servlet-class>ckeditor.CKEditorUploadServlet</servlet-class>
    <init-param>
      <param-name>baseDir</param-name>
      <param-value>/UserFiles/</param-value>
    </init-param>
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>enabled</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>AllowedExtensionsFile</param-name>
      <param-value></param-value>
    </init-param>
    <init-param>
      <param-name>DeniedExtensionsFile</param-name>
      <param-value>
                html|htm|php|php2|php3|php4|php5|phtml|pwml|inc|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|com|dll|vbs|js|reg|cgi|htaccess|asis|ftl
            </param-value>
    </init-param>
    <init-param>
      <param-name>AllowedExtensionsImage</param-name>
      <param-value>jpg|gif|jpeg|png|bmp</param-value>
    </init-param>
    <init-param>
      <param-name>DeniedExtensionsImage</param-name>
      <param-value></param-value>
    </init-param>
    <init-param>
      <param-name>AllowedExtensionsFlash</param-name>
      <param-value>swf|fla</param-value>
    </init-param>
    <init-param>
      <param-name>DeniedExtensionsFlash</param-name>
      <param-value></param-value>
    </init-param>
    <load-on-startup>0</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>SimpleUploader</servlet-name>
    <url-pattern>/ckeditor/uploader</url-pattern>
  </servlet-mapping>

这样就能上传到你这个项目的文件夹下了，命令行有地址输出，

至于所见即所得，html代码存入数据库就行，文本编辑器这自己写个form表单，写个servlet加入数据库就行了

这个

CKeditor上传图片 实现所见即所得界面

CKeditor上传图片实现所见即所得界面