mashangyoujiu/Application/Super/View/Content/add.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>服务商管理后台</title>
    <link href="__PUBLIC__/user/css/jquery.validate.unobtrusive.popstyle.css" rel="stylesheet">
    <script src="__PUBLIC__/user/js/jquery-2.0.3.min.js"></script>
    <script src="__PUBLIC__/user/js/jquery.validate.js"></script>
    <script src="__PUBLIC__/user/js/jquery.validate.unobtrusive.js"></script>
    <script src="__PUBLIC__/user/js/jquery.form.js"></script>
    <script src="__PUBLIC__/layui/layui.js"></script>
    <script src="__PUBLIC__/bootstrap/js/bootstrap.min.js"></script>
    <link href="__PUBLIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/Public/cate/catestyle.css"/>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">

    <!--编译器-->
    <link href="__PUBLIC__/dist/summernote.css" rel="stylesheet">
    <script src="__PUBLIC__/dist/summernote.js"></script>
    <script src="__PUBLIC__/dist/lang/summernote-zh-CN.min.js"></script>
    <style>

        .panel{
            width: 470px;
            margin-left: 100px;
        }

        .layui-input-inline{
            width: 326px!important
        }
        .cate-chose {
            display: block;
            width: 326px;
            height: 38px;
            border: 1px solid #CCCCCC;
            border-radius: 5px;
            box-sizing: border-box;
            padding: 0 5px;
        }
        .layui-form-label{
            width: 100px;
        }
        .layui-input-block{
            margin-left: 100px;
        }
    </style>
</head>

<body class="layui-elem-quote layui-text" style="cursor: pointer;background: white;">
<div class="box-content2">
    <form id="addform" class="layui-form" action="" novalidate="novalidate">
        <div class="gA_inner">
            <label class="layui-form-label">菜单选择：</label>
            <div class="gA_inner_right"  style="width: 326px;">
                <select name="help" id="help" class="cate-chose">
                    <volist name="help_t" id="item">
                        <option value="{$item['id']}">{$item['name_g']}</option>
                    </volist>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 10px;">
            <label class="layui-form-label">标题：</label>

            <div class="layui-input-inline">
                <input type="text" id="titles" name="titles" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 10px;overflow: auto;" id="myeditorbox">
            <label class="layui-form-label">内容：</label>
            <div  id="summernote" name="content" class="panel">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="button" id="submit">提交</button>
            </div>
        </div>

    </form>
</div>
<script>
    layui.use(['layer','form','upload'],function () {
        var layer = layui.layer;
        var form = layui.form;
        var upload = layui.upload;

        $(document).ready(function () {
            $('#summernote').summernote({
                height: 300,
                focus: true,
                lang: 'zh-CN',
                minHeight: null,
                maxHeight: null,
                callbacks: {
                    onImageUpload: function (files) {
                        sendFile(files);
                    }
                }
            });
        });

        //选择图片时把图片上传到服务器再读取服务器指定的存储位置显示在富文本区域内
        function sendFile(files) {
            var formdata = new FormData();
            formdata.append('file', files[0]);
            console.log(formdata);

            $.ajax({
                url: "{:U('Imgupload')}", //图片上传出来的url，返回的是图片上传后的路径，http格式
                data: formdata,
                type: "POST",
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function (data) {
                    // console.log('aaa');
                    console.log(data);
                    //data是返回的hash,key之类的值，key是定义的文件名 'http://csls.mobzhifu.com'+
                    $('#summernote').summernote('insertImage', data.urls);
                },
                error: function () {
                    alert("上传失败");
                }
            });
        }

        $("#submit").click(function () {
            var markupStr = $('#summernote').summernote('code');
            console.log(markupStr);
            var content = markupStr;
            var hid = $('#help option:selected').val();

            var titles = $('#titles').val();
            if (!markupStr) {
                top.layer.msg('内容', {icon: 3, time: 1000});
                return;
            } else {
                $.ajax({
                    url: "{:U('Content/add')}",
                    type: "post",
                    data: {help: hid, content: content, titles: titles},
                    success: function (data) {
                        if (data.status == 1) {
                            top.layer.alert(data.msg, function () {
                                top.layer.closeAll();
                            });
                        } else {
                            top.layer.msg(data.msg, {icon: 2}, function () {
                                window.location.reload();
                            });
                        }
                    }
                })
            }
        })
    })
</script>
</body>
</html>