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();">
...
<input type="submit" class="ButtonHeightWidth"value="提交">
...
</html:form>
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();">
...
<input type="submit" class="ButtonHeightWidth"value="提交">
...
</html:form>