laravel5.4百度编辑器无法正常显示 - 知否问答 - 万象云+社区

<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: '#app', 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>

{ 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'); }

回答动态