Kindeditor编辑器

Posted 2020-10-05 司机刹一脚

官网： http://kindeditor.net/demo.php

导入选中的文件夹

通常在 webapp 下，建立 editor 文件夹

 

当使用kindEditor进行编辑时,编辑后内容,不会自动随表单进行提交

KindEditor 工作原理，隐藏原来 textarea 文本框，生成 iframe，在 iframe 里面进行编辑

 

使用kindeditor导入

应用 kindeditor，页面提供<textarea>文本框

编辑器初始化参数使用

语法： K.create(\'#id\',{options}); 参数采用 key-value 格式

采用 items 属性，定制工具栏按钮显示

使用 kindeditor 使用图片上传编辑显示功能，需要指定 uploadJson 和 fileManagerJson

实现文件上传是PHP程序

 

使用文件管理器功能

和 fileManageJson 一组

默认文件管理器，服务器端程序采用 PHP

 

KindEditor 图片上传功能 图片上传功能

KindEditor 默认采用 PHP 实现，如果使用 java 实现，需要设置初始化参数

查看文件上传返回参数

设置页面 kindeditor 请求路径

在服务器编写 ImageAction ，处理 kindediotr 文件上传功能

/**
     * 上传图片
     * 
     * @return
     */
    private File imgFile;
    private String imgFileFileName;
    private String imgFileContentType;
    
    public void setImgFile(File imgFile) {
        this.imgFile = imgFile;
    }

    public void setImgFileFileName(String imgFileFileName) {
        this.imgFileFileName = imgFileFileName;
    }

    public void setImgFileContentType(String imgFileContentType) {
        this.imgFileContentType = imgFileContentType;
    }

    @Action(value = "image_upload", results = { @Result(name = "success", type = "json") })
    public String upload() throws IOException {
        System.out.println("文件：" + imgFile);
        System.out.println("文件名：" + imgFileFileName);
        System.out.println("文件类型：" + imgFileContentType);

        String savePath = ServletActionContext.getServletContext().getRealPath("/upload/");
        String saveUrl = ServletActionContext.getRequest().getContextPath() + "/upload/";

        // 生成随机图片名
        UUID uuid = UUID.randomUUID();
        String ext = imgFileFileName.substring(imgFileFileName.lastIndexOf("."));
        String randomFileName = uuid + ext;

        // 保存图片(绝对路径)
        File destFile = new File(savePath + "/" + randomFileName);
        System.out.println("绝对路径:" + destFile.getAbsolutePath());
        FileUtils.copyFile(imgFile, destFile);

        // 通知浏览器文件上传成功
        Map<String, Object> result = new HashMap<>();
        result.put("error", 0);
        result.put("url", saveUrl + randomFileName); // 返回相对路劲给浏览器加载图片
        ActionContext.getContext().getValueStack().push(result);
        return SUCCESS;
    }

KindEditor  图片管理器功能

 

点击图片空间，显示服务器端 所有已经上传图片列表，选择一张图片加入当前编辑器

内容中

在页面点击图片空间， 发送请求 image_manage.action

编写 ImageAction 添加 manage 方法

/**
     * 图片空间实现
     * 
     * @return
     */
    private String currentTime;
    
    public void setCurrentTime(String currentTime) {
        this.currentTime = currentTime;
    }
    @Action(value = "image_manage", results = { @Result(name = "success", type = "json") })
    public String manage() {
        // 获取根目录的路径
        String rootPath = ServletActionContext.getServletContext().getRealPath("/") + "upload/";
        // 根目录的url
        String rootUrl = ServletActionContext.getRequest().getContextPath() + "/upload/";
        // 遍历目录取的文件信息
        List<Map<String, Object>> fileList = new ArrayList<Map<String, Object>>();
        // 当前上传目录
        File currentPathFile = new File(rootPath);
        // 图片扩展名
        String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png", "bmp" };
        if (currentPathFile.listFiles() != null) {
            for (File file : currentPathFile.listFiles()) {
                Map<String, Object> hash = new HashMap<>();
                String fileName = file.getName();
                if (file.isDirectory()) {
                    hash.put("is_dir", true);
                    hash.put("has_file", (file.listFiles() != null));
                    hash.put("filesize", 0L);
                    hash.put("is_photo", false);
                    hash.put("filetype", "");
                } else if (file.isFile()) {
                    String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
                    hash.put("is_dir", false);
                    hash.put("has_file", false);
                    hash.put("filesize", file.length());
                    hash.put("is_photo", Arrays.<String> asList(fileTypes).contains(fileExt));
                    hash.put("filetype", fileExt);
                }
                hash.put("filename", fileName);
                hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified()));
                fileList.add(hash);
            }
        }
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("moveup_dir_path", "");
        result.put("current_dir_path", rootPath);
        result.put("current_url", rootUrl);
        result.put("total_count", fileList.size());
        result.put("file_list", fileList);
        ActionContext.getContext().getValueStack().push(result);
        return SUCCESS;
    }