今天调用了layui自带的富文本编辑器,里面有个图片上传按钮。按照官方文档调用设置,并书写图片上传接口,结果图片上传成功了,也回显了,但是提交表单保存的时候,只有文字部分,图片保存不上。后来找各种资料,发现应该这么写,代码如下:
HTML代码:
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">活动简介</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" lay-verify="content" id="content" class="layui-textarea" style="height:300px" name="content">{$activity.content}</textarea>
</div>
</div>
JS代码:
layui.use(['form', 'laydate', 'layer', 'upload','layedit'],
function() {
$ = layui.jquery;
var form = layui.form,
layer = layui.layer,
laydate = layui.laydate,
upload = layui.upload,
layedit = layui.layedit;
//内容富文本编辑
layedit.set({
uploadImage: {
url: '{:url("uploadImgs")}' //接口url
,type: 'post' //默认post
}
});
var index = layedit.build('content'); //建立编辑器
form.verify({
content: function(value) {
return layedit.sync(index);
}
});
//监听提交
form.on('submit(add)',
function(data) {
//发异步,把数据提交给php
console.log(data.field);
$.post("{:url('saveactivity')}",data.field,function(result){
// result = $.parseJSON(result);
if(result.code != '1'){
layer.alert(result.msg, {
icon: 5
});
}else{
layer.alert(result.msg, {
icon: 6
},
function() {
//关闭当前frame
xadmin.close();
parent.layui.table.reload('activitylist');
});
}
});
return false;
});