KindEditor 4.1.10 在 JSP 中的集成与使用-优快云博客

本文链接：https://blog.youkuaiyun.com/xuebaqiang/article/details/104671888

使用的文件：kindeditor-4.1.10
使用kindeditor-4.1.10文件资源可以快速的在jsp文件中添加富文本编辑器。快速而又方便

一、将文件放到js文件夹下

在这里插入图片描述

二、将文件引进去

<!-- 富文本编辑器脚本 -->
<script type="text/javascript" src="/dailyPlan/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" src="/dailyPlan/js/kindeditor-4.1.10/lang/zh_CN.js"></script>

三、创建富文本编辑器

<script type="text/javascript">
var itemAddEditor;
//页面初始化完毕后执行此方法
$(function(){
	//创建富文本编辑器
	itemAddEditor=KindEditor.create("#me_add_form [name=nodecontent]");**

四、同步

解释：提交前将富文本编辑器中的内容同步到textarea中

//提交前将富文本编辑器中的内容同步到textarea中
    	itemAddEditor.sync();
    	/* 表单提交 */
    	$('#me_add_form').form('submit', {

五、表单提交

完整代码

<body>
<script type="text/javascript">
var itemAddEditor;
//页面初始化完毕后执行此方法
$(function(){
	//创建富文本编辑器
	itemAddEditor=KindEditor.create("#me_add_form [name=nodecontent]");
    $('#me_add_submit').bind('click', function(){    
    	// call 'submit' method of form plugin to submit the form 
    	//提交前将富文本编辑器中的内容同步到textarea中
    	itemAddEditor.sync();
    	/* 表单提交 */
    	$('#me_add_form').form('submit', {    
    	    url:'addMeNote',    
    	    onSubmit: function(){    
    	        // do some check    
    	        // return false to prevent submit;  
    	        //非空验证(我的非空验证出错--要看一看)
    	    	if($("#me_add_form :text:eq(1)").val()==""){
		        	$.messager.alert('警告信息','笔记时间不能为空！');
		        	return false;
		        }else if($("#me_add_form :text:eq(2)").val()==""){
		        	$.messager.alert('警告信息','笔记标题不能为空！');
		        	return false;
		        }else if(document.getElementById("me_textarea").value==""){
		        	$.messager.alert('警告信息','笔记内容不能为空！');
		        	return false;
		        }
    	    },    
    	    success:function(data){    
    	        if(data==1){
    	        	//刷新数据表格
		        	$('#me_datagrid').datagrid('reload');
		        	//在右下方显示
		        	$.messager.show({
		        		title:'系统信息',
		        		msg:'成功的添加一条信息！',
		        		timeout:5000,
		        		showType:'slide'
		        	});
		        	//关闭对话框窗口
		        	$("#me_dialog").dialog('close');
    	        }else{
    	        	//在右下方显示
		        	$.messager.show({
		        		title:'系统信息',
		        		msg:'添加信息失败！',
		        		timeout:5000,
		        		showType:'slide'
		        	});
    	        }  
    	    }    
    	});     
    });   
});  
</script>
<div style="padding: 10px;">
	<span style="font-size: 16px;font-weight: bold;font-family: monospace;">笔记管理-》专业笔记-》添加笔记</span>
	<hr>
	<form action="" method="post" id="me_add_form">
		<table align="center">
			<tr height="35px">
				<td>笔记时间:</td>
				<td>
					<input class="easyui-datetimebox" name="nodetime"     
        data-options="required:true,showSeconds:false" value="3/3/2020 2:3" style="width:150px">
				</td>
			</tr>
			<tr height="35px">
				<td>笔记题目:</td>
				<td>
					<input type="text" name="nodetitle">
				</td>
			</tr>
			<tr height="35px">
				<td>笔记内容:</td>
				<td>
					<!-- 添加textarea域-->
					<textarea id="me_textarea" style="width:700px;height: 300px;visibility: hidden;" name="nodecontent"></textarea>
				</td>
			</tr>
			<tr height="35px">
				<td colspan="2">
					<a id="me_add_submit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
				</td>
			</tr>
		</table>
	</form>
</div>
</body>
</html>