kindeditor的简单使用

上传到云:

一、引入kindeditor

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/views/commons/taglibs.jsp"%>
<html>
    <head>
        <script type="text/javascript">
        
        
            yepnope({
                load:[
                '${ctx}/resources/kindeditor/themes/default/default.css',
                '${ctx}/resources/kindeditor/plugins/code/prettify.css',
                '${ctx}/resources/js/ux/KindEditor.js',
                '${ctx}/resources/kindeditor/kindeditor.js',
                '${ctx}/resources/kindeditor/lang/zh_CN.js',
                '${ctx}/resources/kindeditor/plugins/code/prettify.js',
                '${ctx}/resources/extjs/ux/combotree/ComboTree.js',
                '${ctx}/resources/extjs/ux/css/Spinner.css',
                '${ctx}/resources/extjs/ux/Spinner.js',
                '${ctx}/resources/extjs/ux/SpinnerField.js',
                '${ctx}/resources/extjs/ux/DateTimeField.js',
                '${ctx}/plugins/websites/web/resources/js/news/NewsFormPanel.js',
                '${ctx}/plugins/websites/web/resources/js/news/NewsFormWin.js',
                '${ctx}/plugins/websites/web/resources/js/news/NewsReadWindow.js',
                '${ctx}/plugins/websites/web/resources/js/news/NewsUploadWindow.js',
                '${ctx}/plugins/websites/web/resources/js/news/NewsPanel.js',
                '${ctx}/plugins/websites/web/resources/js/news/NewsSynFormWin.js',
                '${ctx}/plugins/websites/web/resources/js/news/NewsSynFormPanel.js',
                '${ctx}/plugins/websites/web/resources/js/news/ImportNewsWin.js',
                '${ctx}/plugins/websites/web/resources/js/news/TreeWindow.js',
                '${ctx}/resources/js/shareux.js',
                '${ctx}/resources/js/ux/StarHtmleditor.js'],
                complete:function(){
                
                    var panel = new Ext.websites.NewsPanel({
                        height : index.tabPanel.getInnerHeight() - 1,
                        id: '${param.id}' + '_panel',
                        actionJson:${actionJson},
                        renderTo: '${param.id}'
                    });
                }
            });    
        </script>
    </head>
    <body>
        <div id="${param.id}"></div>
    </body>
</html>

二、重写下kindeditor方法

Ext.ux.KindEditor = Ext.extend(Ext.form.TextArea, {

    uploadUrl:null,
    render : function(editor) {
        Ext.ux.KindEditor.superclass.render.call(this, editor);
        var contentId = this.id;
        
        if(this.uploadUrl == undefined){
                this.uploadUrl = 'kindEditor/upload';
        }
        var that = this;
        window.setTimeout(function() {
            that.myEditor = KindEditor.create('#' + contentId, {
                cssPath : 'resources/kindeditor/plugins/code/prettify.css',
                uploadJson : that.uploadUrl,
                // uploadJson:'resources/kindeditor/jsp/upload_json.jsp',
                fileManagerJson : 'resources/kindeditor/jsp/file_manager_json.jsp',
                resizeType : 1,
                resizeMode : 1,
                 filterMode : false,
                allowFileManager : true,
                afterCreate : function(id) {
                    /* 响应 ctrl + v ,保存图片* */
                    //KindEditor.ctrl(document, 'v', function() {
                        //    });
//                    KindEditor.ctrl(KindEditor.g[id].iframeDoc, 86, function() {
//                                KindEditor.util.setData(id);
//                                var doc = KindEditor.g[id].iframeDoc;
//                                setTimeout(dealdoc(doc), 100);
//                            });
//                    // ie 中粘贴 --- 包括 toolbar 中 的粘贴和右键浏览器菜单中的粘贴
//                    KindEditor.g[id].iframeDoc.body.onpaste = function() {
//                        var doc = KindEditor.g[id].iframeDoc;
//                        setTimeout(dealdoc(doc), 100);
//                    };
//                    // firefox 粘贴 --- 包括 ctrl+v 和右键浏览器菜单中的粘贴
//                    $(KindEditor.g[id].iframeDoc).bind('paste', null, function() {
//                                var doc = KindEditor.g[id].iframeDoc;
//                                setTimeout(dealdoc(doc), 100);
//                            });
        }

            });
        }, 500);
    },
    getValue : function() {
        if (this.myEditor) {
            return this.myEditor.html();
        } else {
            return '';
        }
    },

    setValue : function(v) {
        var contentId = this.id;
        var that = this;
        window.setTimeout(function() {
                    KindEditor.html('#' + contentId, v);
                }, 500);
    }
});
// 返回 一个无参的方法,用于setTimeout
function dealdoc(doc) {
    return function() {
        deal(doc);
    }
}

// 粘贴时处理图片-- 方法二:同步,可以接受多张图片
function deal(doc) {
    var links = doc.getElementsByTagName("img");
    for (var i = 0; i < links.length; i++) {
        var lin = $(links[i]);
        if ($(lin).attr("add_src")) {

        } else {
            // links[i].src = "<c:url
            // value='/saveImageServlet?mageurl='/>"+links[i].src;
            var imgurl = $(lin).attr("src");
            var html = $.ajax({
                        type : "POST",
                        url : "<c:url value='/saveImageServlet'/>",
                        data : "imageurl=" + imgurl,
                        dataType : "html",
                        async : false

                    }).responseText;
            $(lin).attr("src", "");
            $(lin).attr("src", html);
            $(lin).attr("add_src", "1");

        }
    }
}
Ext.reg('kindeditor', Ext.ux.KindEditor);

这个是上面引入的ux包下的kindeditor方法

三、kindeditor上传的controller

package cn.edu.hbcf.privilege.web.controller;

import java.io.PrintWriter;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang.StringUtils;
import org.json.simple.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import cn.edu.hbcf.common.hadoop.FileManager;
import cn.edu.hbcf.common.hadoop.FileSysFactory;
import cn.edu.hbcf.common.hadoop.FileSysType;

@Controller
@RequestMapping("/kindEditor")
public class KindeditorController {

    @RequestMapping("/upload")
    public void upload(@RequestParam
    MultipartFile imgFile, HttpServletRequest request, String dir,
            HttpServletResponse response) {
        try {
            // 定义允许上传的文件扩展名
            response.setContentType("text/html; charset=UTF-8");
            PrintWriter out = response.getWriter();
            Map<String, String> extMap = new HashMap<String, String>();
            extMap.put("image", "gif,jpg,jpeg,png,bmp");
            extMap.put("flash", "swf,flv");
            extMap.put("media",
                    "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
            extMap.put("file",
                    "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");

            String fileName = imgFile.getOriginalFilename();
            // 检查扩展名
            String fileExt =  StringUtils.substringAfterLast(fileName, ".").toLowerCase();
            if (!Arrays.<String> asList(extMap.get(dir).split(",")).contains(
                    fileExt)) {
                out.println(getError("上传文件扩展名是不允许的扩展名。
只允许" + extMap.get(dir)
                        + "格式。"));
                return;
            }
            
            // 获取文件后缀名 
            String saveName = UUID.randomUUID().toString().replace("-", "")+("".equals(fileExt) ? "" : "." + fileExt);
            String filePath="/filesharesystem/attach";
            FileManager fileMgr=FileSysFactory.getInstance(FileSysType.HDFS);
            fileMgr.putFile(imgFile.getInputStream(), filePath, saveName);
            
//            
            JSONObject obj = new JSONObject();
            obj.put("error", 0);
            if("image".equals(dir)||"media".equals(dir)||"flash".equals(dir)){
                obj.put("url", "dfs/queryResource?resourcePath="+filePath+"/"+saveName);
            }else{
                obj.put("url", "dfs/downloadFile?filePath="+filePath+"/"+saveName+"&fileName="+fileName);
            }
            System.out.println("AAAAAAAAAURL:"+obj.get("url"));
            out.println(obj.toJSONString());
        } catch (Exception e) {
            e.printStackTrace();

        }

    }

    private String getError(String message) {
        JSONObject obj = new JSONObject();
        obj.put("error", 1);
        obj.put("message", message);
        return obj.toJSONString();
    }

}

四、根据地址预览、下载文件的方法

package cn.edu.hbcf.cloud.hadoop.dfs.controller;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException;
import java.util.List;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.commons.lang.StringUtils;
import org.apache.hadoop.fs.FSDataInputStream;
import org.apache.hadoop.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import cn.edu.hbcf.cloud.hadoop.dfs.service.DFSService;
import cn.edu.hbcf.cloud.hadoop.dfs.vo.DfsInfo;
import cn.edu.hbcf.common.constants.WebConstants;
import cn.edu.hbcf.common.hadoop.CFile;
import cn.edu.hbcf.common.hadoop.FileManager;
import cn.edu.hbcf.common.hadoop.FileSysFactory;
import cn.edu.hbcf.common.hadoop.FileSysType;
import cn.edu.hbcf.common.vo.Criteria;
import cn.edu.hbcf.common.vo.ExceptionReturn;
import cn.edu.hbcf.common.vo.ExtFormReturn;
import cn.edu.hbcf.plugin.oa.pojo.NoteBook;
import cn.edu.hbcf.privilege.pojo.BaseUsers;

@Controller
@RequestMapping("/dfs")
public class DFSController {
    @Autowired
    private DFSService dfsService;
    
    @RequestMapping(method=RequestMethod.GET)
    public String index(HttpServletRequest request,HttpSession session,Model model){
        
        return "plugins/cloud/web/views/hadoop/dfs/dfs";
    }
    
    @RequestMapping(value = "/play",method=RequestMethod.GET)
    public String play(HttpServletRequest request,HttpSession session,Model model){
        
        return "plugins/cloud/web/views/hadoop/dfs/play";
    }
    
    @RequestMapping("/upload")
    public void upload(@RequestParam MultipartFile file, HttpServletRequest request, HttpServletResponse response){
        String uploadFileName = file.getOriginalFilename();
        FileManager fileMgr=FileSysFactory.getInstance(FileSysType.HDFS);
        String path=request.getParameter("path");
        HttpSession session=request.getSession(true);
        BaseUsers u = (BaseUsers) session.getAttribute(WebConstants.CURRENT_USER);
        // 获取文件后缀名 
        String fileType = StringUtils.substringAfterLast(uploadFileName, ".");
        String saveName = UUID.randomUUID().toString().replace("-", "")+("".equals(fileType) ? "" : "." + fileType);
        String filePath="/filesharesystem/"+u.getAccount()+path;
        try {
            fileMgr.putFile(file.getInputStream(), filePath, saveName);
            System.out.println("path="+filePath+" uploadFileName="+uploadFileName);
            StringBuffer buffer = new StringBuffer();
            buffer.append("{success:true,fileInfo:{fileName:'").append(uploadFileName).append("',");
            buffer.append("filePath:'").append(filePath+saveName).append("',");            
            buffer.append("projectPath:'").append(filePath+saveName).append("',");
            buffer.append("storeName:'").append(saveName);
            buffer.append("'}}");
            response.setContentType("text/html;charset=utf-8;");
            response.getWriter().write(buffer.toString());
            response.getWriter().flush();
            response.getWriter().close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    @RequestMapping(value="/downloadFile", method = RequestMethod.GET)
    public void download(HttpServletRequest request, HttpServletResponse response,String filePath,String fileName) {
         //String fileName=request.getParameter("fileName");
         try {
             fileName=new String(fileName.getBytes("ISO-8859-1"),"UTF-8");
             filePath=new String(filePath.getBytes("ISO-8859-1"),"UTF-8");
         } catch (UnsupportedEncodingException e1) {
             // TODO Auto-generated catch block
             e1.printStackTrace();
         }

         OutputStream output = null;
         BufferedInputStream bis=null;
         BufferedOutputStream bos=null;
          FileManager fileMgr=FileSysFactory.getInstance(FileSysType.HDFS);
         //response.setContentType("application/x-msdownload");  
         //response.setCharacterEncoding("UTF-8");
         try {
             output = response.getOutputStream();
             response.setHeader("Content-Disposition","attachment;filename="+new String(fileName.getBytes("gbk"),"iso-8859-1"));
             bis=new BufferedInputStream(fileMgr.getFile(filePath));
             bos=new BufferedOutputStream(output);
             byte[] buff=new byte[2048];
             int bytesRead;
             while(-1!=(bytesRead=bis.read(buff,0,buff.length))){
                 bos.write(buff,0,bytesRead);
             }
         } catch (UnsupportedEncodingException e) {
             // TODO Auto-generated catch block
             e.printStackTrace();
         } catch (IOException e) {
             // TODO Auto-generated catch block
             e.printStackTrace();
         } finally{
             if(bis!=null)
                 try {
                     bis.close();
                 } catch (IOException e) {
                     // TODO Auto-generated catch block
                     e.printStackTrace();
                 }
             if(bos!=null)
                 try {
                     bos.close();
                 } catch (IOException e) {
                     // TODO Auto-generated catch block
                     e.printStackTrace();
                 }
         }
         
     }
    @RequestMapping("/delete")
    public void delete(String path, HttpServletResponse response){
        FileManager fileMgr=FileSysFactory.getInstance(FileSysType.HDFS);
        try {
            fileMgr.deleteFile(path);
            StringBuffer buffer = new StringBuffer();
            buffer.append("{success:true}");
            response.setContentType("text/html;charset=utf-8;");
            response.getWriter().write(buffer.toString());
            response.getWriter().flush();
            response.getWriter().close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    @RequestMapping(value ="/queryMovie",method=RequestMethod.GET)
    public void queryMovie( HttpServletRequest request, HttpServletResponse response){
        response.setContentType("application/octet-stream");
        FileManager fileMgr = FileSysFactory.getInstance(FileSysType.HDFS);
        FSDataInputStream fsInput = fileMgr.getStreamFile("/filesharesystem/admin/test/a.swf");
        OutputStream os;
        try {
            os = response.getOutputStream();
            IOUtils.copyBytes(fsInput, os, 4090, false);
            os.flush();
            os.close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } 

    }
    
    /**
     * 根据提交的路径,从云上获取swf格式和picture文档内容
     */
    @RequestMapping(value = "/queryResource", method = RequestMethod.GET)
    public void queryResource(HttpServletRequest request,
            HttpServletResponse response, String resourcePath) {
        response.setContentType("application/octet-stream");
        FileManager fileMgr = FileSysFactory.getInstance(FileSysType.HDFS);
        FSDataInputStream fsInput = fileMgr.getStreamFile(resourcePath);
        OutputStream os = null;
        try {
            os = response.getOutputStream();
            IOUtils.copyBytes(fsInput, os, 4090, false);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } finally{
            
            try {
                if(os != null){
                    os.flush();
                    os.close();
                }
                if(fsInput!= null){
                    fsInput.close();
                }
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    }

    @RequestMapping(value = "/queryListForTree", method = RequestMethod.POST)
    @ResponseBody
    public List<CFile> queryListForTree(HttpServletRequest request) {
        HttpSession session=request.getSession(true);
        BaseUsers u = (BaseUsers) session.getAttribute(WebConstants.CURRENT_USER);
        Criteria criteria = new Criteria();
        criteria.put("username", u.getAccount());
        return dfsService.queryListForTree(criteria);
    }
    
 
    @RequestMapping(value="/status",method=RequestMethod.GET)
    public String dfsIndex(HttpServletRequest request,HttpSession session,Model model){
        
        return "plugins/cloud/web/views/hadoop/dfs/dfsStatus";
    }
    
    @RequestMapping(value="/status", method = RequestMethod.POST)
    @ResponseBody
    public Object get(HttpSession session){
        try{
            DfsInfo dfs = dfsService.getDfsInfo();
            if(dfs != null){
                return new ExtFormReturn(true,dfs);
            }else{
                return new ExtFormReturn(false);
            }
            
        }catch(Exception e){
            
            e.printStackTrace();
            return new ExceptionReturn(e);
            
        }
    
    }
    
    @RequestMapping(value="/dataNode", method = RequestMethod.POST)
    @ResponseBody
    public Object dataNode(){
        try{
            return dfsService.getDataNodeList();
            
        }catch(Exception e){
            
            e.printStackTrace();
            return new ExceptionReturn(e);
            
        }
    
    }
}

即可。

上传到本地服务器:

/**
    * 描述:公司网站内容kindeditor上传图片
    * @param imgFile
    * @param request
    * @param dir
    * @param response
    */
    @RequestMapping("/uploadKindEditor")
    public void upload(@RequestParam
    MultipartFile imgFile, HttpServletRequest request, String dir,
            HttpServletResponse response) {
            try {
                response.setContentType("text/html;charset=utf-8;");
                PrintWriter out = response.getWriter();
                Map<String, String> extMap = new HashMap<String, String>();
                extMap.put("image", "gif,jpg,jpeg,png,bmp");
                extMap.put("flash", "swf,flv");
                extMap.put("media",
                        "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
                extMap.put("file",
                        "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
                // 检查扩展名
                String fileName = imgFile.getOriginalFilename();
                String fileExt =  StringUtils.substringAfterLast(fileName, ".").toLowerCase();
                if (!Arrays.<String> asList(extMap.get(dir).split(",")).contains(
                        fileExt)) {
                    out.println(getError("上传文件扩展名是不允许的扩展名。
只允许" + extMap.get(dir)
                            + "格式。"));
                    return;
                }
                // 保存的地址
                String savePath = request.getSession().getServletContext().getRealPath("/"+"/upload/web");
                // 上传的文件名 //需要保存
                String uploadFileName = imgFile.getOriginalFilename();
                // 获取文件后缀名 //需要保存
                String fileType = StringUtils.substringAfterLast(uploadFileName, ".");
                // 以年月/天的格式来存放
                String dataPath = DateFormatUtils.format(new Date(), "yyyy-MM" + File.separator + "dd");
                // uuid来保存不会重复
                String saveName = UUID.randomUUID().toString().replace("-", "");
                // 最终相对于upload的路径,解决没有后缀名的文件 //需要保存
                // 为了安全,不要加入后缀名
                // 2011-1218364b45f-244d-41b6-bbf4-8df32064a935,等下载的的时候在加入后缀名
                String finalPath = File.separator + dataPath + File.separator + saveName + ("".equals(fileType) ? "" : "." + fileType);
//                String filePath = savePath.replace("\", "/")+finalPath.replace("\", "/");
                File saveFile = new File(savePath + finalPath);
                // 判断文件夹是否存在,不存在则创建
                if (!saveFile.getParentFile().exists()) {
                    saveFile.getParentFile().mkdirs();
                }
                // 写入文件
                FileUtils.writeByteArrayToFile(saveFile, imgFile.getBytes());
                // 保存文件的基本信息到数据库
                //图片相对tomcat路径
                String imgPath = "/upload/web".replace("\", "/") + finalPath.replace("\", "/");
                
                JSONObject obj = new JSONObject();
                obj.put("error", 0);
                if("image".equals(dir)){
                    obj.put("url", "web/queryResource?resourcePath="+imgPath);
//                    obj.put("url", "web/queryResource?resourcePath="+filePath+"/"+saveName);
                }else{
//                    obj.put("url", "dfs/downloadFile?filePath="+filePath+"/"+saveName+"&fileName="+fileName);
                    out.println(getError("上传文件扩展名是不允许的扩展名。
只允许" + extMap.get(dir)
                            + "格式。"));
                    return;
                }
                System.out.println("AAAAAAAAAURL:"+obj.get("url"));
                out.println(obj.toJSONString());
            } catch (Exception e) {
                e.printStackTrace();
            }
    }
    @RequestMapping(value = "/queryResource", method = RequestMethod.GET)
    public void queryResource(HttpServletRequest request,
            HttpServletResponse response, String resourcePath) {
        response.setContentType("application/octet-stream");
//        FileManager fileMgr = FileSysFactory.getInstance(FileSysType.HDFS);
//        FSDataInputStream fsInput = fileMgr.getStreamFile(resourcePath);
        String path = request.getSession().getServletContext().getRealPath("/");
        File file = new File(path+resourcePath);
        InputStream in = null;
        OutputStream os = null;
        try {
            in = new FileInputStream(file);
            os = response.getOutputStream();
            IOUtils.copy(in, os);
        } catch (IOException e) {
            e.printStackTrace();
        } finally{
            
            try {
                if(os != null){
                    os.flush();
                    os.close();
                }
                if(in != null){
                    in.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
   private String getError(String message) {
        JSONObject obj = new JSONObject();
        obj.put("error", 1);
        obj.put("message", message);
        return obj.toJSONString();
   }

<%@ page language="java" contentType="text/html; charset=UTF-8"%><%@ include file="/WEB-INF/views/commons/taglibs.jsp"%><html><head><script type="text/javascript">yepnope({load:['${ctx}/resources/kindeditor/themes/default/default.css','${ctx}/resources/kindeditor/plugins/code/prettify.css','${ctx}/resources/js/ux/KindEditor.js','${ctx}/resources/kindeditor/kindeditor.js','${ctx}/resources/kindeditor/lang/zh_CN.js','${ctx}/resources/kindeditor/plugins/code/prettify.js','${ctx}/resources/extjs/ux/combotree/ComboTree.js','${ctx}/resources/extjs/ux/css/Spinner.css','${ctx}/resources/extjs/ux/Spinner.js','${ctx}/resources/extjs/ux/SpinnerField.js','${ctx}/resources/extjs/ux/DateTimeField.js','${ctx}/plugins/websites/web/resources/js/news/NewsFormPanel.js','${ctx}/plugins/websites/web/resources/js/news/NewsFormWin.js','${ctx}/plugins/websites/web/resources/js/news/NewsReadWindow.js','${ctx}/plugins/websites/web/resources/js/news/NewsUploadWindow.js','${ctx}/plugins/websites/web/resources/js/news/NewsPanel.js','${ctx}/plugins/websites/web/resources/js/news/NewsSynFormWin.js','${ctx}/plugins/websites/web/resources/js/news/NewsSynFormPanel.js','${ctx}/plugins/websites/web/resources/js/news/ImportNewsWin.js','${ctx}/plugins/websites/web/resources/js/news/TreeWindow.js','${ctx}/resources/js/shareux.js',    '${ctx}/resources/js/ux/StarHtmleditor.js'],complete:function(){var panel = new Ext.websites.NewsPanel({height : index.tabPanel.getInnerHeight() - 1,    id: '${param.id}' + '_panel',    actionJson:${actionJson},    renderTo: '${param.id}'});}});</script></head><body><div id="${param.id}"></div></body></html>

原文地址:https://www.cnblogs.com/zrui-xyu/p/5232090.html