洽逛烧藏娇孩贾黔渭片疚码姐
创建添加文章的artAdd()
<?php namespace app\admin\controller; use app\common\controller\Base; use app\common\model\Article as ArtModel; class Article extends Base { public function index() { //获取文档 //根据时间查询 paginate()可以分页 获取分页数据 每页8条 下方代码获取分页数据 $arts=ArtModel::order('create_time')->paginate(8); //模板赋值 $this->view->arts = $arts; //渲染模板 return $this->view->fetch(); } //渲染添加文章模板 public function artAdd() { return $this->fetch(); } }
复制x-admin里面的order-add.html到模板页面 重命名为art_add.html
修改添加按钮的url
测试
修改art_add.html 内容 并修改内容
文章内容引入了富文本编辑器wangEditor
官网:http://www.wangeditor.com/
本站下载:http://www.xuexianswer.com/yunpan/short.php?sid=3tcOn1
wangEditor参考文档:
上传图片
<div id="div1"> <p>欢迎使用 wangEditor 富文本编辑器</p> </div> <script type="text/javascript" src="/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#div1') // 配置服务器端地址 editor.customConfig.uploadImgServer = '/upload' // 进行下文提到的其他配置 // …… // …… // …… editor.create() </script>
其中/upload是上传图片的服务器端接口,接口返回的数据格式如下(实际返回数据时,不要加任何注释!!!)
{ // errno 即错误代码,0 表示没有错误。 // 如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理 "errno": 0, // data 是一个数组,返回若干图片的线上地址 "data": [ "图片1地址", "图片2地址", "……" ] }
自定义 fileName
上传图片时,可自定义filename,即在使用formdata.append(name, file)添加图片文件时,自定义第一个参数。
editor.customConfig.uploadFileName = 'yourFileName'
引入wangEditor
1.复制wangEditor.min.js到如下目录
2.引入js文件:
<script type="text/javascript" src="/static/admin/js/wangEditor.min.js"></script>
3.配置wangEditor 最重要的是设置id属性为editor,下方就使用该id获取即可:
<script type="text/javascript"> var E = window.wangEditor var editor = new E('#editor') // 或者 var editor = new E( document.getElementById('editor') ) editor.create() </script>
此时wangEditor已经成功引入
wangEditor上传图片
1.上传图片的处理脚本是当前控制器(Article)下的upload()
var E = window.wangEditor //生成editor对象 var editor = new E('#editor') //设置图片上传的控件名称:类似于input的name属性,供接口获取图片信息使用 editor.customConfig.uploadFileName = 'img' //设置服务上的图片上传处理接口脚本 editor.customConfig.uploadImgServer = '{:url("upload")}' editor.create()
art_add.html完整代码:
{include file="common@header"} <div class="x-body"> <form class="layui-form"> <div class="layui-form-item"> <label for="art_title" class="layui-form-label"> 文章标题 </label> <div class="layui-input-block"> <input type="text" id="art_title" name="art_title" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label for="art_content" class="layui-form-label"> 文章内容 </label> <div class="layui-input-block" id="editor" > </div> </div> <div class="layui-form-item"> <label for="cate_id" class="layui-form-label"> 所属分类 </label> <div class="layui-input-inline"> <select id="cate_id" name="cate_id"> {//使用模型的助手函数获取所有的分类信息} {volist name=":model('category')->select()" id="cate"} <option value="{$cate.cate_id}">{$cate.cate_name}</option> {/volist} </select> </div> </div> <div class="layui-form-item"> <label for="art_order" class="layui-form-label"> 文章排序 </label> <div class="layui-input-inline"> <input type="text" id="art_order" name="art_order" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label for="art_rec" class="layui-form-label"> 是否推荐 </label> <div class="layui-input-inline"> <input type="radio" name="art_rec" value="1" title="推荐"> <input type="radio" name="art_rec" value="0" title="普通" checked> </div> </div> <div class="layui-form-item"> <label for="L_repass" class="layui-form-label"> </label> <button class="layui-btn" lay-filter="add" lay-submit=""> 增加 </button> </div> </form> </div> <!-- 引入wangeditor编辑器的js文件 --> <script type="text/javascript" src="/static/admin/js/wangEditor.min.js"></script> <script> layui.use(['form','layer'], function(){ $ = layui.jquery; var form = layui.form,layer = layui.layer; //wangeditor的配置可以查看官网手册 //配置wangEditor富文本编辑器 ////将要用到的对象添加到全局 var E = window.wangEditor //生成editor对象 var editor = new E('#editor') //设置图片上传的控件名称:类似于input的name属性,供接口获取图片信息使用 //img中保存了上传图片的信息 可以在upload()中通过img对象获取这些信息 editor.customConfig.uploadFileName = 'img' //设置服务上的图片上传处理接口脚本 //上传图片的处理脚本是当前控制器(Article)下的upload() editor.customConfig.uploadImgServer = '{:url("upload")}' editor.create() //监听提交 form.on('submit(add)', function(data){ console.log(data); //发异步,把数据提交给php layer.alert("增加成功", {icon: 6},function () { // 获得frame索引 var index = parent.layer.getFrameIndex(window.name); //关闭当前frame parent.layer.close(index); }); return false; }); }); </script> </body> </html>
创建upload()方法:
<?php namespace app\admin\controller; use app\common\controller\Base; use app\common\model\Article as ArtModel; class Article extends Base { public function index() { //获取文档 //根据时间查询 paginate()可以分页 获取分页数据 每页8条 下方代码获取分页数据 $arts=ArtModel::order('create_time')->paginate(8); //模板赋值 $this->view->arts = $arts; //渲染模板 return $this->view->fetch(); } //渲染添加文章模板 public function artAdd() { return $this->fetch(); } //处理富文本编辑器wangEditor中的图片上传 public function upload() { //接收图片信息,创建文件对象 $file=$this->request->file('img'); //将文件移动到目录目录中,并将结果返回给客户端处理 if($info = $file->validate(['ext'=>'jpg,jpeg,png,gif'])->move('upload')) { //客户端(wangEditor)要求返回的必须是JSON格式数据,默认没有加上上传目录,需要手工添加一下 return json(['errno'=>0,'data'=>['/upload/'.$info->getSaveName()]]); } else { return $img_file->getError(); } } }
新建upload目录
此时便可以成功上传图片
添加文章
通过异步将新增的文档信息提交给doAdd()
{include file="common@header"} <div class="x-body"> <form class="layui-form"> <div class="layui-form-item"> <label for="art_title" class="layui-form-label"> 文章标题 </label> <div class="layui-input-block"> <input type="text" id="art_title" name="art_title" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label for="art_content" class="layui-form-label"> 文章内容 </label> <div class="layui-input-block" id="editor" > </div> </div> <div class="layui-form-item"> <label for="cate_id" class="layui-form-label"> 所属分类 </label> <div class="layui-input-inline"> <select id="cate_id" name="cate_id"> {//使用模型的助手函数获取所有的分类信息} {volist name=":model('category')->select()" id="cate"} <option value="{$cate.cate_id}">{$cate.cate_name}</option> {/volist} </select> </div> </div> <div class="layui-form-item"> <label for="art_order" class="layui-form-label"> 文章排序 </label> <div class="layui-input-inline"> <input type="text" id="art_order" name="art_order" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label for="art_rec" class="layui-form-label"> 是否推荐 </label> <div class="layui-input-inline"> <input type="radio" name="art_rec" id="art_rec" value="1" title="推荐"> <input type="radio" name="art_rec" id="art_rec" value="0" title="普通" checked> </div> </div> <div class="layui-form-item"> <label for="L_repass" class="layui-form-label"> </label> <button class="layui-btn" lay-filter="add" lay-submit=""> 增加 </button> </div> </form> </div> <!-- 引入wangeditor编辑器的js文件 --> <script type="text/javascript" src="/static/admin/js/wangEditor.min.js"></script> <script> layui.use(['form','layer'], function(){ $ = layui.jquery; var form = layui.form,layer = layui.layer; //wangeditor的配置可以查看官网手册 //配置wangEditor富文本编辑器 ////将要用到的对象添加到全局 var E = window.wangEditor //生成editor对象 var editor = new E('#editor') //设置图片上传的控件名称:类似于input的name属性,供接口获取图片信息使用 //img中保存了上传图片的信息 可以在upload()中通过img对象获取这些信息 editor.customConfig.uploadFileName = 'img' //设置服务上的图片上传处理接口脚本 //上传图片的处理脚本是当前控制器(Article)下的upload() editor.customConfig.uploadImgServer = '{:url("upload")}' editor.create() //监听提交 form.on('submit(add)', function(data){ console.log(data); // 发异步,把数据提交给php $.post("{:url('doAdd')}",{ 'art_title' : $("#art_title").val(), //文档的内容必须以wangEditor规定的形式获取 'art_content' : editor.txt.html(), 'cate_id' : $("#cate_id").val(), 'art_order' : $("#art_order").val(), 'art_rec' : $("#art_rec").val() },function(data){ if(data.status==0) { layer.alert(data.msg, {icon: 6},function () { // 获得frame索引 var index = parent.layer.getFrameIndex(window.name); //关闭当前frame parent.layer.close(index); }); } else { layer.alert("添加失败", {icon: 6},function () { // 获得frame索引 var index = parent.layer.getFrameIndex(window.name); //关闭当前frame parent.layer.close(index); }); } }) return false; }); }); </script> </body> </html>
doAdd()
<?php namespace app\admin\controller; use app\common\controller\Base; use app\common\model\Article as ArtModel; class Article extends Base { public function index() { //获取文档 //根据时间查询 paginate()可以分页 获取分页数据 每页8条 下方代码获取分页数据 $arts=ArtModel::order('create_time','desc')->paginate(8); //模板赋值 $this->view->arts = $arts; //渲染模板 return $this->view->fetch(); } //渲染添加文章模板 public function artAdd() { return $this->fetch(); } //处理富文本编辑器wangEditor中的图片上传 public function upload() { //接收图片信息,创建文件对象 $file=$this->request->file('img'); //将文件移动到目录目录中,并将结果返回给客户端处理 if($info = $file->validate(['ext'=>'jpg,jpeg,png,gif'])->move('upload')) { //客户端(wangEditor)要求返回的必须是JSON格式数据,默认没有加上上传目录,需要手工添加一下 return json(['errno'=>0,'data'=>['/upload/'.$info->getSaveName()]]); } else { return $img_file->getError(); } } //处理新增文章操作 public function doAdd() { //获取用户添加的文章数据 $data=$this->request->param(); //将数据添加到表中,并判断是否添加成功,如失败由客户端处理 if(ArtModel::create($data,true)) { return ['status'=>0,"msg"=>"添加成功"]; } } }
新增文章测试:
发布:
弟富视孰拒蒜写窗信黄缕哩告