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

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

先看下成品。
在这里插入图片描述这里使用的是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” 一定要写上
在这里插入图片描述与之对应的是 form.verify在这里插入图片描述
这是后端的接法。使用的是ssm框架。
在这里插入图片描述
希望对用到的猿猿们有所帮助。

  • 1
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CKEditor 编辑器提交内容的方式和普通表单提交没有区别。在后台接收 CKEditor 编辑器提交内容,可以通过以下步骤实现: 1. 在前端页面中,使用 CKEditor 编辑器生成富文本内容,并将其作为表单元素的值提交后台。例如: ```html <form action="/submit" method="POST"> <textarea name="content" id="editor"></textarea> <button type="submit">提交</button> </form> <script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script> <script> ClassicEditor .create( document.querySelector( '#editor' ) ) .catch( error => { console.error( error ); } ); </script> ``` 2. 在后台接收表单提交数据。由于 CKEditor 生成的内容是富文本格式,因此需要使用相应的富文本编辑器处理工具来解析内容。常用的富文本编辑器处理工具有 `CKEditor` 官方提供的解析工具,以及 `htmlparser2`、`cheerio` 等第三方库。例如,使用 `CKEditor` 官方提供的解析工具 `@ckeditor/ckeditor5-engine` 来解析富文本内容: ```javascript const { HtmlEmbeddingMode } = require( '@ckeditor/ckeditor5-engine' ); const { Parser } = require( '@ckeditor/ckeditor5-engine' ); const content = req.body.content; const parser = new Parser( HtmlEmbeddingMode ); const doc = parser.parse( content ); // 获取文本内容 const text = doc.getRoot().getChildren()[0].data; ``` 以上代码中,`req.body.content` 是表单提交的 CKEditor 编辑器生成的富文本内容,使用 `@ckeditor/ckeditor5-engine` 库中的 `Parser` 类解析富文本内容,然后通过 `doc.getRoot().getChildren()[0].data` 获取文本内容。 3. 将解析后的内容存储到数据库或文件中,或者进行其他业务逻辑处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值