富文本编辑器数据提交到后台

在开发在线周测系统的时候写了一个发布公告的功能,这也是常见的功能,特此记录一下。

先看下成品。
富文本编辑器数据提交到后台_第1张图片这里使用的是layui的富文本编辑器与layDate控件。这里实现的功能是,管理员可以选择日期发布公告,通过提交按钮将标题,富文本框和laydate的数据发送到后台。
直接上代码

<form action="" class="layui-form">
		<fieldset class="layui-elem-field">
			<legend>基本信息</legend>
			<div class="layui-field-box">
				<label class="layui-from-label"><span>*</span>文章标题</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<div class="layui-inline">
					<input type="text" placeholder="文章标题" class="layui-input"
						id="title" name="title" />
				</div>
				<span>标题字数限制在35个字符</span> <br>
				<div>
					<label class="layui-from-label"><span>*</span>发布时间</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<div class="layui-inline">
						<input class="layui-input" placeholder="发布时间" id="time"
							name="time"
							onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
					</div>
				</div>
			</div>
		</fieldset>

		<fieldset class="layui-elem-field layui-field-title">
			<legend>文章内容</legend>
			<div class="layui-field-box">
				<textarea class="layui-textarea" id="LAY_demo1" lay-verify="content" name="text"
					style="display: none">  
                               请输入您的公告
             </textarea>
			</div>
			<button type="submit" class="layui-btn" lay-submit
				lay-filter="fromsumbit">提交</button>
				<input type="hidden" id="input" name="input">
		</fieldset>
	</form>
	<script src="static/admin/layui/layui.js" type="text/javascript"
		charset="utf-8"></script>
	<script>
		layui.use('laydate', function() {
			var laydate = layui.laydate;
	
			var start = {
				min : laydate.now(),
				max : '2099-06-16 23:59:59',
				istoday : false,
				choose : function(datas) {
					end.min = datas; //开始日选好后,重置结束日的最小日期
					end.start = datas //将结束日的初始值设定为开始日
				}
			};
	
			var end = {
				min : laydate.now(),
				max : '2099-06-16 23:59:59',
				istoday : false,
				choose : function(datas) {
					start.max = datas; //结束日选好后,重置开始日的最大日期
				}
			};
	
		});
	</script>
	<script>
		layui.use(['layedit','form'], function() {
			var form = layui.form();
			var layedit = layui.layedit,
				$ = layui.jquery;
			//构建一个默认的编辑器
			var index = layedit.build('LAY_demo1');
	
			form.verify({
				content : function(value) {
					return layedit.sync(index);
					document.getElementById("input").innerText = layedit
							.getContent(index); //给hidden赋值
				}
			})
		
		
		form.on('submit(fromsumbit)', function(data) {
			console.log(data.field);
			alert("111")
			 $.ajax({   
                url:'${pageContext.request.contextPath}/addnotice.action',       
                method:'post',       
                data:data.field,        
                dataType:'JSON',         
                success:function(res){       
                     alert("公告添加成功");
                    },              
                    error:function (data) {
                         alert("公告添加失败");
                    }           
                    }) ;         
		})
	});
	</script>

var index = layedit.build(‘LAY_demo1’);的意思是定义一个富文本编辑器。这里特别要注意的是 lay-verify=“content” 一定要写上
富文本编辑器数据提交到后台_第2张图片与之对应的是 form.verify富文本编辑器数据提交到后台_第3张图片
这是后端的接法。使用的是ssm框架。
富文本编辑器数据提交到后台_第4张图片
希望对用到的猿猿们有所帮助。

你可能感兴趣的:(笔记,前端)