KindEditor 富文本编辑器的简单运用

首先需要引入

css：

<link rel="stylesheet" href="${base}/static/kindeditor/themes/default/default.css"/>

js：

<!--引入引入kindeditor编辑器相关文件-->
<script charset="utf-8" src="${base}/static/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="${base}/static/kindeditor/lang/zh-CN.js"></script>

html代码：

<textarea id="editor" style="width: 97%; height: 200px; visibility: hidden;">请填写事件描述</textarea>

js代码：

$(function () {
        //详情编辑器
        KindEditor.ready(function (K) {
            this.editor = K.create('textarea[id="editor"]', {
            	width: '97%', // 文本框宽度(可以百分比或像素)
                height: '300px', // 文本框高度(只能像素)
                minWidth: 150, // 最小宽度（数字）
                minHeight: 100, // 最小高度（数字）
                items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy',
                    'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'multiimage',
                    'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                    'anchor', 'link', 'unlink'],
                uploadJson: '${base}/file/kindEditor/upload', // 指定上传图片的服务器端程序
                allowFileManager: false
            });
        });
    });

其中uploadJson: '${base}/file/kindEditor/upload'  上传图片服务器地址

后台java代码：

    @PostMapping("/kindEditor/upload")
    @ResponseBody
    @SysLog("kindEditor文件上传")
    public void doPostKindEditorUpload(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置Response响应的编码
        resp.setContentType("text/html; charset=UTF-8");
        //获取一个Response的Write对象
        PrintWriter writer = resp.getWriter();
        //文件保存目录路径 /u02/webapps/alarm/event/kindEditor/
        String savePath = kindEditorPath;
        LOGGER.info(savePath);
        //文件保存目录访问URL http://localhost:8000/downloadFile
        String saveUrl = filePath;
        LOGGER.info(saveUrl);
        //定义允许上传的文件扩展名
        HashMap<String, String> extMap = new HashMap<>();
        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");
        //最大文件大小
        long maxSize = 1000000;
        //判断是否是一个文件
        if (!ServletFileUpload.isMultipartContent(req)) {
            writer.println(getError("请选择文件。"));
            return;
        }
        //检查目录
        File uploadDir = new File(savePath);
        if (!uploadDir.isDirectory()) {
            writer.println(getError("上传目录不存在。"));
            return;
        }
        //检查目录写权限
        if (!uploadDir.canWrite()) {
            writer.println(getError("上传目录没有写权限。"));
            return;
        }
        String dirName = req.getParameter("dir");
        if (dirName == null) {
            dirName = "image";
        }
        if (!extMap.containsKey(dirName)) {
            writer.println(getError("目录名不正确。"));
            return;
        }
        //创建文件夹
        savePath += dirName + "/";
//        saveUrl += dirName + "/";
        File saveDirFile = new File(savePath);
        if (!saveDirFile.exists()) {
            saveDirFile.mkdirs();
        }
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
        String ymd = sdf.format(new Date());
        savePath += ymd + "/";
//        saveUrl += ymd + "/";
        File dirFile = new File(savePath);
        if (!dirFile.exists()) {
            dirFile.mkdirs();
        }

        MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) req;
        Map<String, MultipartFile> fileMap = mRequest.getFileMap();
        String fileName = null;
        for (Iterator<Map.Entry<String, MultipartFile>> it = fileMap.entrySet().iterator(); it.hasNext();) {
            Map.Entry<String, MultipartFile> entry = it.next();
            MultipartFile mFile = entry.getValue();
            fileName = mFile.getOriginalFilename();
            // 检查文件大小
            if (mFile.getSize() > maxSize) {
                writer.println(getError("上传文件大小超过限制。"));
                return;
            }
            String fileExt = fileName.substring(fileName.lastIndexOf(".")+1);
            if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {
                writer.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
                return;
            }

            SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
            String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
            saveUrl += "?url=" + savePath + newFileName + "&name=" + fileName;
            String path = savePath + newFileName;

            BufferedOutputStream outputStream = new BufferedOutputStream(new FileOutputStream(path));
            FileCopyUtils.copy(mFile.getInputStream(), outputStream);

            JSONObject obj = new JSONObject();
            obj.put("error", 0);
            obj.put("url", saveUrl);
            writer.println(obj.toString());
        }
        //将writer对象中的内容输出
        writer.flush();
        //关闭writer对象
        writer.close();
    }
    // 一个私有的方法，用于响应错误信息
    public String getError(String message) {
        JSONObject obj = new JSONObject();
        obj.put("error", 1);
        obj.put("message", message);
        return obj.toJSONString();
    }