1效果展示

1.1 点击图片上传按钮

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

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

1.4从本地选择图片上传

1.5上传效果

1.6 上传路径： WebRoot/upload/image

2-1：kindeditor-4.1.10版本插件

2-2：jquery 1.x 版本，系统使用 1.11.3版本的jquery

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 创建富文本编辑器

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

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

A、表单

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

B、按钮

C、验证函数

特别需要注意的是：

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中

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

虽然都是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();">

...

...

</html:form>

kindeditor4.1.10图片上传配置及使用说明相关推荐

ckeditor finder php,CKEDITOR CKFINDER的图片上传配置(C#/asp.net/php)
CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还 ...
asp.net 百度编辑器 UEditor 上传图片图片上传配置编辑器配置网络连接错误，请检查配置后重试...
1.配置ueditor/editor_config.js文件,将 //图片上传配置区,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址,imag ...
4.CKeditor4.10.0最新图片上传配置
CKeditor-4.10.0富文本编辑器,到上传图片的配置,网上的教程都不适合现在的版本. 第一步:在config.js的CKEDITOR.editorConfig = function( conf ...
Ueditor 图片上传配置
(三) 下面这部分呢,来讲下编辑器的上传图片的功能,在官方文件中没有详细的介绍怎么配置上传图片的方法 1)在ueditor/jsp下的config.json文件中修改 "imageUrlPr ...
富文本编辑器CKEditor配置及图片上传配置
一.ckeditor4的配 1.下载ckeditor4 进入官网https://ckeditor.com/ckeditor-4/download/可以直接点击下载,也可以下拉到 CKEditor 4 ...
kindeditor图片上传配置水印
先上效果图网上有帖子说初始化了编辑器后就无法更改设置,其实是可以的.只不过不再是修改那些初始化参数了. <script> KindEditor.ready(function (K) ...
kindeditor java_kindeditor在Java项目中的应用以及图片上传配置
在官网下载Kindededitor的开发包在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中找到 ...
.net_ckeditor+ckfinder的图片上传配置
CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...
C# ckeditor+ckfinder的图片上传配置
CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...

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