KindEditor在ssm项目中的二次封装

在上篇博客中介绍了kindEditor的简单使用。但在实际项目中，如果每个界面中都需要进入一大段的js文件，并且如果还有很多上传按钮的话，界面将显示的十分不优雅。于是将kindeditor进行二次封装。方便在其他界面中引用。首先看一下效果图，如下：

本次案例中，我初始化了两个textarea和两个单文件上传框。如果不进行代码的重构，需要做大量的重复工作，界面代码将显示的十分混乱，维护成本较大。 下面贴上重构之后的代码。

1.提取全局js :commom.js

var web ={


    submitPageForm : function(form,pageNum){

        var url=form.action;
        url=url+"?pageNum="+pageNum;
        form.action=url;
        form.submit();
        //var url = URL(url);
    },
    /**
     * 全局参数设置
     */
    kindEditorParams:{//全局参数设置
        allowFileManager : true,
        uploadJson : '/FileUploaderController',//后台文件上传处理的路径
        filePostName : 'file'//文件的字段名，一会看到后台代码时会解释怎么使用
    },
    /**
     * 创建文件上传的按钮
     * @param uploadId 按钮id
     * @param urlId  路径回显id
     */
    createUploadButton:function(uploadId,urlId){
        var editor = KindEditor.editor(web.kindEditorParams);
        KindEditor('#'+uploadId).click(//为文件上传按钮绑定事件
            function() {
                editor.loadPlugin('image', function() {//加载文件上传插件
                    editor.plugin.imageDialog({
                        showRemote : false,
                        imageUrl : KindEditor('#'+urlId).val(),//获取本地文件路径:如:c:/doc/ccc.png文件
                        clickFn : function(url, title, width, height,
                                           border, align) {//当上传文件成功时的回调函数
                            KindEditor('#'+urlId).val(url);//将路径回显
                            editor.hideDialog();//隐藏文件上传kuang
                        }
                    });
                });
            });
    },
    /**
     * 创建富文本编辑器
     * @param textAreaId  文本框id
     */
    createKindEditor:function(textAreaId){
        KindEditor.create('#'+textAreaId,web.kindEditorParams);
    }
};

前台代码编写，

首先引入所有的js文件，一定要按照下面的顺序引入。：

html片段：

js片段：

如此便完成了二次封装。

下面贴上全部的jsp代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


Hello World!