12文档编辑器wangEditor的引入以新增文章

12文档编辑器wangEditor的引入以新增文章

洽逛烧藏娇孩贾黔渭片疚码姐


创建添加文章的artAdd()

12文档编辑器wangEditor的引入以新增文章第1张

<?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 

12文档编辑器wangEditor的引入以新增文章第2张

修改添加按钮的url   

12文档编辑器wangEditor的引入以新增文章第3张

测试

12文档编辑器wangEditor的引入以新增文章第4张


修改art_add.html 内容  并修改内容

12文档编辑器wangEditor的引入以新增文章第5张

文章内容引入了富文本编辑器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到如下目录

12文档编辑器wangEditor的引入以新增文章第6张

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完整代码:

12文档编辑器wangEditor的引入以新增文章第2张

{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()方法:

12文档编辑器wangEditor的引入以新增文章第1张

<?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目录

12文档编辑器wangEditor的引入以新增文章第9张

此时便可以成功上传图片

12文档编辑器wangEditor的引入以新增文章第10张


添加文章

12文档编辑器wangEditor的引入以新增文章第2张

通过异步将新增的文档信息提交给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()

12文档编辑器wangEditor的引入以新增文章第1张

<?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"=>"添加成功"];
        }
    }

}

新增文章测试:

12文档编辑器wangEditor的引入以新增文章第13张

发布:

12文档编辑器wangEditor的引入以新增文章第14张


弟富视孰拒蒜写窗信黄缕哩告