layui富⽂本域form表单提交和ajax提交获取编辑器内容详解
最近写项⽬中需要⽤到LayUI富⽂本编辑器，提交时发现富⽂本编辑器中内容是空的，查了很多资料才发现，LayUI在渲染富⽂本域时，是在下⾯插⼊的样式代码。我们页⾯上定义的是⼀个textarea标签，之后⽤JS渲染的。我们获取的内容是textarea中内容，富⽂本域中的内容和textarea中的内容不是⾃动同步的，所以我们需要在提交前把内容同步⼀下。
form表单提交：
⾸先定义⽂本域和提交按钮
提交时把富⽂本域中的内容与textarea标签同步⼀下。
ajax提交
ajax提交form表单是⼀样的
提交部分代码，先绑定按钮，同步⽂本内容，在发送post请求提交：
注意：submit(formSubmit)中的formSubmit为提交按钮的lay-filter值。data.field可以获取到form表单中的数据。返回false是阻⽌form提交后，在进⾏form表单提交刷新页⾯。
<("submit(formSubmit)", function (data) {
console.log(data.field);
$.post("layEdit/save", data.field, function(result){
layer.msg(result.msg,{offset:'rb'});
});
return false;
})
上⾯插⼊都是图⽚，下⾯为代码部分：
form表单部分代码：
<form id="myForm" action="layUITextarea/save" method="post" class="layui-form white-bg radius">
<input type="hidden" name="id" id = "id" value="${model.id}">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" class="layui-input" name="title" value="${model.title}">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">类型</label>
<div class="layui-input-block">
<input type="text" class="layui-input" name="type" value="${pe}">
</div>
</div>
</div>
<textarea id="lay_edit" lay-verify="content" name = "text">${}</textarea>
<button type="submit" class="layui-btn" lay-submit="" lay-filter="formSubmit">提交</button>
</form>
同步部分代码：
layui.use(['layedit', 'form'], function(){
var form = layui.form;
var layedit = layui.layedit;
layedit.set({ //设置图⽚接⼝
uploadImage: {
url: 'layUITextarea/upload', //接⼝url
type: 'post'
}
//创建⼀个编辑器
var index = layedit.build('lay_edit',{
height: 350
});
//提交时把值同步到⽂本域中
form.verify({
//content富⽂本域中的lay-verify值
content: function(value) {
return layedit.sync(index);
}
});
//提交
<("submit(formSubmit)", function (data) {
console.log(data.field);
$.post("layEdit/save", data.field, function(result){
layer.msg(result.msg,{offset:'rb'});
});
return false;
})
});
----------------------------------------------------------------------⾃⼰项⽬--------------------------------------------------------------
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label" >所属分类</label>
<div class="layui-input-block" >
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected="">阅读</option>
<option value="2">游戏</option>
<option value="3">⾳乐</option>
<option value="4">旅⾏</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" >标题</label>
<div class="layui-input-block" >
<input type="text" name="title" required lay-verify="required" autocomplete="off" placeholder="例如：春季脱单，⼤型相亲活动" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label" >活动图⽚</label>
<div class="layui-upload">
asp富文本编辑器<div class="layui-input-block">
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1" src="__STATIC__/images/1.jpg" >
<input type="hidden" name="background_img" value="">
<p id="demoText"></p>
</div>
<button type="button" class="layui-btn" id="test1" >上传图⽚</button>
<br>
<span >*必填项活动图⽚尺⼨: 1147 * 442</span>
</div>
</div>
</div>
<div class="layui-form-item" ></div>
<div class="layui-form-item">
<label class="layui-form-label" >浏览量</label>
<div class="layui-input-block" >
<input type="text" name="address" required lay-verify="required" autocomplete="off" placeholder="例如：武汉市洪⼭区洪⼭体育馆" class="layui-input"> </div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" >点赞数</label>
<div class="layui-input-block" >
<input type="text" name="address" required lay-verify="required" autocomplete="off" placeholder="例如：武汉市洪⼭区洪⼭体育馆" class="layui-input">
</div>
<textarea id="LAY_demo1" lay-verify="content" name="content" >
</textarea>
<div></div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">⽴即提交</button>
<button type="button" class="layui-btn layui-btn-primary" onclick="back()">返回</button> </div>
</div>
</form>
<script>
layui.use(['upload','form','layedit'], function() {
var $ = layui.jquery
, upload = layui.upload
,layedit = layui.layedit
,form = layui.form;
layedit.set({ //设置图⽚接⼝
uploadImage: {
url: "{:url('admin/article/form_img')}", //接⼝url
type: 'post'
}
},function (res) {
console.log(res);
});
//创建⼀个编辑器
var index = layedit.build('LAY_demo1',{
height: 350
});
//提交时把值同步到⽂本域中
form.verify({
//content富⽂本域中的lay-verify值
content: function(value) {
return layedit.sync(index);
}
});
//监听提交
<('submit(demo1)', function(data){
console.log(data.field);
// $.ajax({
// type:'post',
// url:"{:url('admin/article/form')}",
// data:{data:data.field},
// success:function (res) {
// console.log(res);
// // if (res.status == 200) {
// // layer.msg(res.msg,function () {
// // load();
// // });
/
/ // } else {
// // layer.msg('失败', {icon: 2, time: 1000});
// // }
// }
// });
return false;
});
$('.site-demo-layedit').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
/
/⾃定义⼯具栏
layedit.build('LAY_demo2', {
tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right'] ,height: 100
})
});
</script>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论