kindeditor4.1.10图片上传配置及使用说明

时间:2022-08-29 18:31:25

1效果展示

1.1 点击图片上传按钮

kindeditor4.1.10图片上传配置及使用说明

1.2 弹出选择框,可以从已上传的图片中选择上传,也可以从本地上传。

kindeditor4.1.10图片上传配置及使用说明

1.3选择从图片空间上传,文件夹模式浏览所有已上传的图片

kindeditor4.1.10图片上传配置及使用说明

1.4从本地选择图片上传

kindeditor4.1.10图片上传配置及使用说明

1.5上传效果

kindeditor4.1.10图片上传配置及使用说明

1.6 上传路径: WebRoot/upload/image

 

2-1:kindeditor-4.1.10版本插件

 2-2:jquery 1.x 版本,系统使用 1.11.3版本的jquery

kindeditor4.1.10图片上传配置及使用说明

3-1:在jsp页面中引入对应的jquery 和 kindeditor,如:

<scriptlanguage="JavaScript"type="text/javascript"

src="<%=basePath%>js/jquery-1.11.3.min.js"></script>

<scriptcharset="utf-8"    src="<%=basePath%>js/kindeditor-4.1.10/kindeditor.js"></script>

<scriptcharset="utf-8"src="<%=basePath%>js/kindeditor-4.1.10/lang/zh_CN.js"></script>

3-2:创建富文本编辑器:

id='content'的textarea 创建 富文本编辑器

 kindeditor4.1.10图片上传配置及使用说明

3-3:对应HTML的textarea代码:

kindeditor4.1.10图片上传配置及使用说明

3-3:在表单提交过程中,为了保证在ie下能够正常运行,使用type="submit"类型的button进行提交;考虑到需要对表单进行“长度、非空”等验证,在form表单提交时,添加onsubmit函数,具体如下:

A、表单

kindeditor4.1.10图片上传配置及使用说明

一定要加“return”,这样 “validateValueS();在返回false时,才会停止提交。

B、按钮

kindeditor4.1.10图片上传配置及使用说明

C、验证函数

kindeditor4.1.10图片上传配置及使用说明

特别需要注意的是:

function validateValueS这个函数不能放在$(document).ready(function()中,否则该函数在ie中不执行。

一、Kindeditor 图片上传 如何实现分析

1、选择实现方式:php,java,asp.net等,本系统中选用java

2、修改上传路径

在文件/tech/WebRoot/js/kindeditor-4.1.10/jsp/file_manager_json.jsp中

kindeditor4.1.10图片上传配置及使用说明

在文件/tech/WebRoot/js/kindeditor-4.1.10/jsp/upload_json.jsp中

kindeditor4.1.10图片上传配置及使用说明

 

虽然都是jsp文件,但是文件中均为java代码。

 

4-1:引入js文件代码

<scriptlanguage="JavaScript"type="text/javascript"

src="<%=basePath%>js/jquery-1.11.3.min.js"></script>

<scriptcharset="utf-8"    src="<%=basePath%>js/kindeditor-4.1.10/kindeditor.js"></script>

<scriptcharset="utf-8"    src="<%=basePath%>js/kindeditor-4.1.10/lang/zh_CN.js"></script>

 

4-2:创建富文本编辑器代码

<scripttype="text/javascript">

        var editor1;

        KindEditor.ready(function(K){

            editor1 = K.create("textarea[id='content']",{

                resizeType : 1,

                allowPreviewEmoticons: false,

                allowImageUpload:true,//允许上传图片

                allowFileManager:true//允许对上传图片进行管理

                uploadJson:'<%=basePath%>js/kindeditor-4.1.10/jsp/upload_json.jsp'//上传图片的java代码,只不过放在jsp

                fileManagerJson:'<%=basePath%>js/kindeditor-4.1.10/jsp/file_manager_json.jsp',

                afterUpload: function(){this.sync();}//图片上传后,将上传内容同步到textarea

                afterBlur: function(){this.sync();},   ////失去焦点时,将上传内容同步到textarea

                items : [

                    'fontname','fontsize','|','forecolor','hilitecolor','bold','italic','underline',

                    'removeformat','|','justifyleft','justifycenter','justifyright','insertorderedlist',

                    'insertunorderedlist','|','emoticons','link','media','|','image']   

            });

        });        

 </script>

4-3:表单验证代码

<scripttype="text/javascript">

function validateValueS()

    {

        if($.formValidator.pageIsValid())

        {

            return true;

        }

        return false;

    }  

 </script>

   

4-4:表单、按钮代码

<html:formaction="lab.do?method=addLabInfo"target="_self"  styleClass="kjLabForm"method="POST"styleId="kjLabForm"onsubmit="returnvalidateValueS();">

...

<input type="submit"                                             class="ButtonHeightWidth"value="提交">

...

</html:form>