Database xmcontents: []; is empty and the Baidu editor cannot be displayed properly, prompting (Cannot read property "offsetWidth" of null), to be xmcontents: [0]. Fill in the value, and the editor can display normally, but cannot store it in the database. Prompt (SQLSTATE [23000]: Integrity constraint violation: 1048 Column "title" cannot be null (SQL: insert into xmcontents ( title , promulgator , source , content , xmbt_id , updated_at , created_at ) values (, 24, 2018-07-1005 Column 0041, 2018-07-10 05:00:41)
No solution can be found at this time
related codes
cleate.blade.php
@ extends ("backend.layout.master3")
@ section (" content")
<div class="page-header">
<div class="pull-left">
<h4></h4>
</div>
</div>
<div class="info-center-title">
<span class="padding-large-right manage-title pull-left">
<a href="/backend/xmxs"></a>
</span>
<span class="padding-large-right pull-left"><a class="active" href="/backend/xmxs/create"></a></span>
</div>
<div class="clearfix"></div>
<form action="/backend/xmxs" method="post" class="form-horizontal">
{{ csrf_field() }}
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">
</h3>
</div>
<div class="panel-body">
<div class="table-margin">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">
<span class="glyphicon glyphicon-asterisk" style="color:red;"></span>
:
</label>
<div class="col-sm-6 col-md-6">
<input type="text" name="title" class="form-control" required placeholder="">
</div>
</div>
</div>{{----}}
<div class="table-margin">
<div class="form-group">
<label for="name" class="col-sm-6 col-md-2 control-label">
<span class="glyphicon glyphicon-asterisk" style="color:red;"></span>
:
</label>
<div class="col-sm-6 col-md-6">
<input type="text" name="site" class="form-control" required value="">
</div>
</div>
</div>{{----}}
<div class="table-margin">
<div class="form-group">
<label for="" class="col-sm-6 col-md-2 control-label">
<span class="glyphicon glyphicon-asterisk" style="color:red;"></span>
:
</label>
<div class="col-sm-6 col-md-6">
<div class="input-group">
<input type="text" class="form-control" name="preview" readonly=""
value="/master/images/nopic.jpg" required>
<div class="input-group-btn">
<button onclick="upImage(this)" class="btn btn-default"
type="button">
</button>
</div>
</div>
<div class="input-group" style="margin-top:5px;">
<img src="{{asset("/master/images/nopic.jpg")}}"
class="img-responsive img-thumbnail" width="350">
<em class="close" style="position:absolute; top: 0px; right: -14px;"
title="" onclick="removeImg(this)"></em>
</div>
</div>
<script>
//
function upImage(obj) {
require(["util"], function (util) {
options = {
multiple: false,//
};
util.image(function (images) { //
$("[name="preview"]").val(images[0]);
$(".img-thumbnail").attr("src", images[0]);
}, options)
});
}
//
function removeImg(obj) {
$(obj).prev("img").attr("src", "resource/images/nopic.jpg");
$(obj).parent().prev().find("input").val("");
}
</script>
</div>
</div>{{----}}
</div>
</div>{{--xmbts--}}
<div class="panel panel-info" id="app">
<div class="panel-heading">
<h3 class="panel-title">
</h3>
</div>
<div class="panel-body" v-for="(v,k) in xmcontents">
<div class="table-margin">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">
<span class="glyphicon glyphicon-asterisk" style="color:red;"></span>
:
</label>
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" v-model="v.title" >
</div>
</div>
</div>{{----}}
<div class="table-margin">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">
<span class="glyphicon glyphicon-asterisk" style="color:red;"></span>
:
</label>
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" v-model="v.promulgator" >
</div>
</div>
</div>{{----}}
<div class="table-margin">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">
<span class="glyphicon glyphicon-asterisk" style="color:red;"></span>
:
</label>
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" v-model="v.source">
</div>
</div>
</div>{{----}}
<div class="table-margin">
<div class="form-group">
<label for="name" class="col-md-2 control-label">
<span class="glyphicon glyphicon-asterisk" style="color:red;"></span>
:
</label>
<div class="col-md-6">
<textarea id="container" style="height:500px;width:100%;" v-model="v.content"></textarea>
</div>
</div>
</div>{{----}}
<div class="panel-footer" style="margin-top: 10px;">
<div class="row" >
<div class="col-sm-2 col-sm-offset-2">
<button class="btn btn-success btn-sm" @click.prevent="del(k)">
</button>
</div>
</div>
</div>{{----}}
</div>
<div class="panel-footer">
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-offset-2" role="group">
<button class="btn btn-default" @click.prevent="add"></button>
</div>
<textarea name="xmcontents" hidden>@{{ xmcontents }}</textarea>
</div>
</div>{{----}}
</div>
<div class="table-margin">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-success"></button>
<a class="btn btn-default" href="/backend/xmxs" role="button"></a>
</div>
</div>
</div>{{----}}
</form>
<script>
require(["vue","util"], function (Vue,util) {
var vm = new Vue({
el: "-sharpapp",
data: {
v: {content:""},
xmcontents:[0]
},
methods: {
add: function () {
var field = {title: "", promulgator:"", source:"", content:"",id: "hd" + Date.parse(new Date())};
/**/
this.xmcontents.push(field);
},
del: function (k) {
this.xmcontents.splice(k, 1);
},
},
mounted() {
//
var This = this;
util.ueditor("container", {}, function (editor) {
//
editor.addListener("contentChange", function () {
vm.$set(vm.v, "content", editor.getContent());
});
//vue
vm.$watch("v", function (item) {
if (editor && editor.getContent() != item.content) {
editor.setContent(item.content ? item.content : "");
}
});
//
editor.addListener("blur", function () {
vm.$set(vm.v, "content", editor.getContent());
});
editor.addListener("clearRange", function () {
vm.$set(vm.v, "content", editor.getContent());
});
});
}
})
})
</script>
@ endsection
XmbtController.php
public function create ()
{
return view("backend.xmxs.create");
}
public function store(Request $request,Xmbt $xmbt)
{
$xmbt["title"] = $request["title"];
$xmbt["site"] = $request["site"];
$xmbt["preview"] = $request["preview"];
$xmbt->save();
$xmcontents = json_decode($request["xmcontents"],true);
foreach ($xmcontents as $xm){
$xmbt->xmcontents()->create([
"title" => $xm["title"],
"promulgator" => $xm["promulgator"],
"source" => $xm["source"],
"content" => $xm["content"],
]);
}
flash("")->overlay();
return redirect("backend/xmxs");
}