TP5.1 +LayuiAdmin 富文本使用教程

挠头了一下午，终于解决了 layui富文本的图片问题！ 

第一个方面 视图模板body 里面这么写：

<form class="layui-form" id="form_1" action="">
    <div class="layui-form-item layui-form-text">
       <textarea class="layui-textarea" placeholder="请输内容" 
         name="content" lay-verify="content"
         id="lay_edit" style="border: 2px;" ></textarea>
    </div>
    <div class="layui-form-item">
    <button class="layui-btn" lay-submit="" lay-filter="editor">提交保存<button>
    </div>
    </form>    

JS里面这么写：

{block name="js"}
<script src="__layuiadmin__/layui/layui.js" charset="utf-8"></script>
<script>

         var layedit = layui.layedit;
        // var index= layedit.build('demo',{
        // });
        // var content = layedit.getContent(index);  //获取html
    //编辑器
    layui.use(['layedit','form'], function(){
        var layedit = layui.layedit;
        var form    = layui.form;
        var up_url="{:url('md')}";
        layedit.set({
            //暴露layupload参数设置接口 --详细查看layupload参数说明
            uploadImage: {
                url:up_url //接口url
                ,type: 'post' //默认post
                ,accept: 'image'
                , acceptMime: 'image/*'
                ,exts: 'jpg|png|gif|bmp|jpeg'
                , size: '10240'
            }
            , devmode: true
            //插入代码设置
            , codeConfig: {
                hide: true,  //是否显示编码语言选择框
                default: 'javascript' //hide为true时的默认语言格式
            }
            , tool: [
            'strong' //加粗
            ,'italic' //斜体
            ,'underline' //下划线
            ,'del' //删除线
            
            ,'|' //分割线

            ,'left' //左对齐
            ,'center' //居中对齐
            ,'right' //右对齐
            ,'link' //超链接
            ,'unlink' //清除链接
            ,'face' //表情
            ,'image' //插入图片
            ,'help' //帮助

            ]
            ,height: 300, //设置编辑器高度
        });

        var index = layedit.build('lay_edit',{
            height: 300, //设置编辑器高度
        });   //建立编辑器

           //提交时把值同步到文本域中
           form.verify({
            //content富文本域中的lay-verify值
            content: function(value) {
                return layedit.sync(index);
            }
        });

        
    }); 
        
</script>
    
{/block}

最重要的就是后台这么写：

　　

 public function md()
    {   
         $request = new Request();//Request::instance()
        $file = $request->file('file');
        if(empty($file)){
            $result["code"] = "1";
            $result["msg"] = "请选择图片";
            $result['data']["src"] = '';
        }else{
            // 移动到框架应用根目录/public/uploads/layui
            $info = $file->move('uploads/layui' );
            if($info){
                $name_path =str_replace('\',"/",$info->getSaveName());
                //成功上传后 获取上传信息
                $result["code"] = '0';
                $result["msg"] = "上传成功";
                $result['data']["src"] = "/uploads/layui/".$name_path;
            }else{
                  // 上传失败获取错误信息
                $result["code"] = "2";
                $result["msg"] = "上传出错";
                $result['data']["src"] ='';
            }
        }
        return json_encode($result);
    }

至此 点击上传图片 图片正常显示 ：