实现的功能如下。



html页面代码：
<script type="text/javascript" src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>

<div class="layui-form-item" style="position: relative;z-index: 2;">
             <label class="layui-form-label">内容</label>
             <div class="layui-input-block">
                <div id="div1"></div>
                 <textarea id="editor_content" name="body" style="display:none;"></textarea>
            </div>
   </div>


 <script type="text/javascript">
layui.use('form',function(){
            var form=layui.form;
            //监听提交事件
            form.on('submit(myform)',function(obj){
                fields=JSON.stringify(obj.field);
                $.ajax({
                    url:'__URL__/insert'
                    ,type:'post'
                    ,data:{'val':fields}                 
                    ,success:function(data){  }
                })
                return false;
            })
        })
    var E = window.wangEditor
    var editor = new E('#div1')
    var $text1 = $('#editor_content')
 
    /* 处理上传图片的controller路径 */
    editor.customConfig.uploadImgServer = "{:url('article/insertPic')}"; //上传URL
    editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024;//图片上传大小设置
    editor.customConfig.uploadImgMaxLength = 100;
    editor.customConfig.uploadFileName = 'file';//服务端接收file的名字
    editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            console.log(result);
            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url =result.data;
            insertImg(url);
 
            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    }
    editor.customConfig.debug = true;
 
    editor.customConfig.onchange = function (html) {
        // 监控输入时的变化，同步更新到 textarea
        $text1.val(html)
    }
    editor.create()
    // 初始化 textarea 的值
    $text1.val(editor.txt.html())
</script>

php后台代码：

//执行添加文章
    public function insert(){
        if(request()->isPost()){

            //获取请求信息写入member表
            $req=htmlspecialchars_decode(input('val'));//实体转为字符
            $data_yp=json_decode($req,true);
            $data_yp['create_time']=time();       
            
            $result=Db::name('articles')->insert($data_yp);
            //判断
            if($result){        
                return json(['code'=>1000,'msg'=>'成功添加文章']);        
            }else {
                return json(['code'=>1001,'msg'=>'添加文章失败']);                
            }
        }

    }
//编辑器上传图片
public function insertPic(){
        $file = request()->file('file');
        //上传回调error为0
        if(empty($file)){
            $result["error"] = "1";
            $result['data'] = '';
        }else{
            // 移动到框架应用根目录/public/uploads/ 目录下
            $info = $file->move(ROOT_PATH . 'public' . DS . 'static/admin/image/editor' );
            if($info){
                $name_path =$info->getSaveName();
                //成功上传后 获取上传信息
                $name_path =str_replace('\\',"/",$info->getSaveName());
                $result["error"] = '0';
                $result['data'] = "/image/editor/".$name_path;
            }else{
                // 上传失败获取错误信息
                $result["code"] = "2";
                $result['data'] ='';
            }
        }

        return json_encode($result);

    }

标签：