KindEditor在ssm项目中的二次封装

最新推荐文章于 2018-09-10 01:55:55 发布

ding_spring_autumn

最新推荐文章于 2018-09-10 01:55:55 发布

阅读量661

点赞数 1

分类专栏：前端框架的使用文章标签： KindEditor ssm框架二次封装代码重构

本文链接：https://blog.csdn.net/ding_spring_autumn/article/details/53148619

版权

前端框架的使用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在上篇博客中介绍了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文件，一定要按照下面的顺序引入。：

<!--引入kejs -->
<script src="/resource/kindeditor/kindeditor.js"></script>
<script src="/resource/kindeditor/lang/zh_CN.js"></script>
<script src="/resource/js/commom.js"></script>

html片段：

<p><textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea></p>
<p><textarea id="editor_id2" name="content" style="width:700px;height:300px;"></textarea></p>
<input type="text" id="url3" value="" /> <input type="button" id="image3" value="选择文件" />
<input type="text" id="url4" value="" /> <input type="button" id="image4" value="选择文件" />

js片段：

<script>
    //初始化编辑器
    web.createKindEditor('editor_id');
    web.createKindEditor('editor_id2');
    //初始化上传
    web.createUploadButton('image3','url3');
    web.createUploadButton('image4','url4');
</script>

如此便完成了二次封装。

下面贴上全部的jsp代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
<h2>Hello World!</h2>
<p><textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea></p>
<p><textarea id="editor_id2" name="content" style="width:700px;height:300px;"></textarea></p>
<input type="text" id="url3" value="" /> <input type="button" id="image3" value="选择文件" />
<input type="text" id="url4" value="" /> <input type="button" id="image4" value="选择文件" />
<!--引入kejs -->
<script src="/resource/kindeditor/kindeditor.js"></script>
<script src="/resource/kindeditor/lang/zh_CN.js"></script>
<script src="/resource/js/commom.js"></script>
<script>
    //初始化编辑器
    web.createKindEditor('editor_id');
    web.createKindEditor('editor_id2');
    //初始化上传
    web.createUploadButton('image3','url3');
    web.createUploadButton('image4','url4');
</script>
</body>
</html>

ding_spring_autumn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
KindEditor在ssm项目中的二次封装

在上篇博客中介绍了kindEditor的简单使用。但在实际项目中，如果每个界面中都需要进入一大段的js文件，并且如果还有很多上传按钮的话，界面将显示的十分不优雅。于是将kindeditor进行二次封装。方便在其他界面中引用。首先看一下效果图，如下：本次案例中，我初始化了两个textarea和两个单文件上传框。如果不进行代码的重构，需要做大量的重复工作，界面代码将显示的十分混乱，维护成本较大。下面贴
复制链接

扫一扫