Kindeditor: 在线HTML编辑器使用入门

1. 前端页面引入

    <!--导入html编辑器-->
    <script type="text/javascript" src="../../editor/kindeditor.js"></script>
    <script type="text/javascript" src="../../editor/lang/zh_CN.js"></script>
    <link rel="stylesheet" href="../../editor/themes/default/default.css"/>

2.页面body中需要提供文本框

<textarea id="description" name="description" style="width:82%" rows="20"></textarea>

3.script中引入

    <script type="text/javascript">
        $(function () {
            KindEditor.ready(function (K) {
                window.editor = K.create("#description", {
                    // items 配置在首页需要显示的功能按钮
                    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', '|', 'image', 'multiimage',
                        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                        'anchor', 'link', 'unlink', '|', 'about'
                    ],
                    allowFileManager: true,
                    // 文件上传插件提交路径
                    uploadJson: '../../image_upload.action',
                    // 空间管理路径
                    fileManagerJson: '../../image_manager.action'
                });
            });

4. 后台Action完成上传图片

// 属性驱动, 完成上传文件相关属性加载
    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;
    }

    /**
     * 上传文件, 将文件保存到本地
     * @return
     * @throws IOException
     */
    @Action(value = "image_upload", results = { @Result(name = "success", type = "json") })
    public String imageUpload() throws IOException {
        //1. 这个获取的文件上传的绝对路径.
        String savePath = ServletActionContext.getServletContext().getRealPath("/upload/");
        //2. 这个是文件上传的相对路径
        String saveUrl = ServletActionContext.getRequest().getContextPath() + "/upload/";

        //3. 生成随机图片名, 防止重复上传.
        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<String, Object>();
        result.put("error", 0);
        result.put("url", saveUrl + randomFileName); // 返回相对路径
        ActionContext.getContext().getValueStack().push(result);

        return SUCCESS;
    }

5.后台完成图片空间实现

/**
     * 图片空间的实现
     * @return
     */
    @Action(value = "image_manager", results = @Result(name = "success", type = "json"))
    public String imageManager(){
        // 获取上传文件夹的绝对路径
        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, Object>();
                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;
    }

未完待续…