富文本下编辑器上传图片 一系列问题

最近被layer这个简单有方便的前端框架忽然难死,就是编辑器部分上传图片和回显问题!废话不多直接说(不足还望指出,js引入之类不谈 layui.css 和layui.js)
先说下注意下事项和参考文档
官方layer编辑器文档
(注意:这个是1.X版本的 不是2.X版本,也是找了许久,2.X新版没找到入口)
注意事项: 1.严格按照上传返回数据格式(必须json 和必须是二维数组 字段要映射不能自定义)!!!
2. 一定要在build之前引入上传图片接口!!! (其他解析在代码注释中)

HTML & JQ代码

//html简单只是 单纯 设置 必须必须是 textarea 标签
<div class="layui-input-block">
    <textarea class="layui-textarea layui-hide" name="description" id="description"></textarea>
</div>


//这是重点*****

//必须引入 其中form和laydate可以不用 项目需求而已
layui.use(['form', 'layedit', 'laydate','upload'], function() {
		//上边引入多少 下边定义多少
        var form = layui.form(),
            $ = layui.jquery,
            layer = layui.layer,
            //这个是编辑器重中之重 必须有定义 其他也可以不要
            layedit = layui.layedit,
         //这就是上边说的 build 之前引入
        layedit.set({
            uploadImage: {
                url:'/Admin/News/uploadFile/' //图片上传接口url
                ,type: 'post' //默认post
            }
        });
        //创建一个编辑器 build 就算创建好了 其中 description 是html的 id id id
        var editIndex = layedit.build('description');
		//想获取编辑器的文本和图片 括号里 是 上一行定义的参数
		layedit.getContent(editIndex);
});

看到这你们发现 都 ok 我是死在参数没跟框架中映射上 都是自定义的参数 不识别啊返回也是空 官方文档 上边有链接 我还是截个图吧
富文本下编辑器上传图片 一系列问题
PHP 这边不就是upload上传嘛 我还是写一下吧 自己也长个记性吧

		//必须是file('file') 括号file得有  一开始我自己封装了不能用 
		$file = request()->file('file');
        if (empty($file)) {
            return output(1,200004,'newsinfo'); 
        }
        $info = $file->validate(['size'=>1567800,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'static\upload');
        if($info){
            $filePath = '/static/upload/'.$info->getSaveName();
            //$getInfo = $info->getInfo();
            //获取图片的原名称
            //核心技术 我勒个去 code 必须0 否则失败 然后看上边截图吧!!!
            $cc  = array('code' =>0 ,'msg'=>'上传成功','data'=>array('src' =>$filePath));
            echo json_encode($cc);
        }else{
            $cc  = array('code' =>1 ,'msg'=>$file->getError(),'data'=>array('src' =>$filePath));
            // 上传失败获取错误信息
            echo json_encode($data);
        }

难受 一天玩他 总算也是解决了!!!!哎

上一篇:layui中富文本编辑器及图片上传的使用


下一篇:ASP.NET MVC实现layui富文本编辑器应用