chenyongxing
/
editor


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
							<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.filer.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery-filer.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery/jquery-2.1.1.min.js"></script>
    <script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerComboBox.js"></script>
    <script src="js/ckeditor/ckeditor.js"></script>
    <script src="js/dropzone.js"></script>
    <script src="js/zzxUpload.js"></script>
    <script src="js/zzxUtils.js"></script>
    <script src="js/jquery.filer.min.js"></script>
    <title>文章管理列表</title>
    <style>
        .content{  margin:0 auto; width:100%;  }
        .title{  margin:0 auto; width:500px;  }
        input{  width:350px; }
        .ad-padd{  height: 100px;  width: 95%;  padding: 10px;  margin:30px border: solid 1px #dcdcdc;  border-radius: 2px;  font-size: 12px;  }
        .ad-padd::-webkit-input-placeholder{  color:#ccc;  }
        .ad-padd::-moz-placeholder{  color:#ccc;  }
        .ad-padd:-moz-placeholder{  color:#ccc;  }
        .ad-padd:-ms-input-placeholder{  color:#ccc;  }
        .hidden{  display: none;  }
        table{    margin-top: 30px;}
        table tr{height: 40px;  line-height: 40px;}
        .td-left{text-align: right;}
        .td-right{text-align: left;}
        .width350{width: 350px !important;}
        .jFiler-item-thumb-image img{
            width: 120px;
            height: 80px;;
        }
    </style>
</head>

<body>
    <form  id="article" enctype="multipart/form-data" method="post" onsubmit="return sub()">
        <div class="liger-form">
            <div class="content">
                <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="20%" class="td-left"><label>标&emsp;&emsp;题：</label></td>
                        <td width="80%" class="td-right">
                            <input class="liger-textbox width350" name="title" data-label="标题" required="required" value="${article.title}" />
                            <input type="hidden" value="${article.id}" name="id" id="id">
                        </td>
                    </tr>
                    <tr>
                        <td width="20%" class="td-left"><label>文章类型：</label></td>
                        <td width="80%" class="td-right">
                            <input id="typeSelect"/>
                            <input type="hidden" name="type" id="type" value="${article.type}"/>
                            <input type="hidden" name="typeName" id="typeName" value="${article.typeName}"/>
                        </td>
                    </tr>
                    <tr>
                        <td width="20%" class="td-left"><label>文章来源：</label></td>
                        <td width="80%" class="td-right">
                            <input id="articleFrom"  required="required" />
                        </td>
                    </tr>
                    <tr class="fromUrl hidden">
                        <td width="20%" class="td-left">
                            URL：
                        </td>
                        <td width="80%" class="td-right">
                            <input type="url" id="url" name="url"  class="liger-textbox" class="width350" value="${article.url}"/>
                        </td>
                    </tr>
                    <tr class="bySelf hidden">
                        <td width="20%" class="td-left">
                            关&ensp;键&ensp;字：
                        </td>
                        <td width="80%" class="td-right">
                            <input name="keyword" class="liger-textbox" class="width350"value="${article.keyword}"/>
                        </td>
                    </tr>
                    <tr class="bySelf hidden">
                        <td width="20%" class="td-left"><label class="bySelf hidden">简&emsp;&emsp;介：</label></td>
                        <td width="80%" class="td-right">
                            <div class="width350"><textarea class="ad-padd" name="contentFirst" placeholder="简介" >${article.contentFirst}</textarea></div>
                        </td>
                    </tr>
                    <tr class="bySelf hidden">
                        <td width="20%" class="td-left"><label class="bySelf hidden">内&emsp;&emsp;容：</label></td>
                        <td width: 80%;>
                            <div  style="width: 80%;"><textarea id="TextArea1"  cols="20" rows="2" name="ckeditor" class="ckeditor">${article.content}</textarea></div>
                            <input  type="hidden" name="content" id="content" />
                        </td>
                    </tr>
                    <tr>
                        <td width="20%" class="td-left"><label>上传图片：</label></td>
                        <td width="80%" class="td-right">
                            <input type="file" id="imgFile" name="file" multiple="multiple" class="mui-pull-right">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center">
                            <input type="reset" value="重置" style="width: 80px;">&emsp;&emsp;
                            <input type="submit" value="保存" style="width: 80px;"/>
                        </td>
                    </tr>
                </table>
           <%--     <form  id="uploadForm" action="http://172.19.103.31:10001/ydf17-6-10/upload/image" method="post" onsubmit="return upload()" id="uploadImg">

                </form>--%>
            </div>
        </div>
    </form>
</body>
<script>
    $(document).ready(function(){
        var urlVal = $("#url").val();
        if(urlVal != ''){
            $(".fromUrl").each(function(){
                $(this).removeClass("hidden");
                $(".bySelf").each(function(){
                    $(this).addClass("hidden");
                })
            })
            $("#url").attr("required",true);//设置url必输
        }else{
            $(".bySelf").each(function(){
                $(this).removeClass("hidden");
                $(".fromUrl").each(function(){
                    $(this).addClass("hidden");
                })
            })
            if(typeof($("#url").attr("required"))!=="undefined"){
                $("#url").attr("required",false);//取消设置url必输
            }
        }
    });
    var url = $("#url").val();
    function call(data){
        debugger
        alert(data.city);
    }
    var typeSelect = $("#typeSelect").ligerComboBox(
        {
            url:"getArticleType",
            valueField: 'code',
            textField: 'name',
            selectBoxWidth: 400,
            value:'${article.type}',
            onSelected:function(value,text){
                $("#type").val(value);
                $("#typeName").val(text);
            }
        }
    );

    $("#articleFrom").ligerComboBox(
            {
                data: [
                    {id: 1, name: '从url获取'},
                    {id: 2, name: '录入'},
                ],
                valueField: 'id',
                textField: 'name',
                selectBoxWidth: 400,
                value:function(){
                    var urlVal = $("#url").val();
                    return urlVal? 1:2;
                },
                onSelected:function(value,text){
                    if(value==1){
                        $(".fromUrl").each(function(){
                            $(this).removeClass("hidden");
                            $(".bySelf").each(function(){
                                $(this).addClass("hidden");
                            })
                        })
                        $("#url").attr("required",true);//设置url必输
                    }else if(value==2){
                        $(".bySelf").each(function(){
                            $(this).removeClass("hidden");
                            $(".fromUrl").each(function(){
                                $(this).addClass("hidden");
                            })
                        })
                        if(typeof($("#url").attr("required"))!=="undefined"){
                            $("#url").attr("required",false);//取消设置url必输
                        }
                    }
                }
            }
    );
    var editor = CKEDITOR.replace('ckeditor');

    function sub(){
        var articleFrom = $("#articleFrom").ligerComboBox().getValue();
        if(articleFrom==''){
            alert("请选择文章来源");
            return false;
        }

        var typeSelect = $("#typeSelect").ligerComboBox().getValue();
        if(typeSelect==''){
            alert("请选择文章类型");
            return false;
        }

        var data = editor.getData();
        if(articleFrom==2){
            if(data==undefined||data==''){
                alert("请输入文章内容")
                return false;
            }
        }
        $("#content").val(data);
        debugger
        var form = new FormData($("#article")[0]);

        /*for(var i =0;i<files.length;i++){
            form.append("file"+i,$(".jFiler-item-thumb-image img"));
        }*/
        for(var i=0;i<files.length;i++){
            form.append("file",files[i]);
        }

        $.ajax({
            url:"save",
            type:"post",
            data:form,
            processData:false,
            async: false,
            contentType:false,
            success:function(data){
                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                parent.layer.close(index);
//                window.location.href="toList";
            }
        });
        return false;
    }


    var files = [];
    var fileindex = 0;
    var bx_files=[];
    var uploadDropzone = function(obj, titleName, maxfiles, paramname, fs) {
        $(obj).filer({
            changeInput: '<div class="mui-table-view-cell my-table-col-2 img-row">\
				 		<span>'+titleName+'</span>\
				 		<span><img style="width:75px;height:50px;margin-top: 10px;" class="head-img mui-action-preview" src="img/add_img.png"/></span></div>',
            showThumbs: true,
            addMore: true,
            limit: maxfiles,
            maxSize: 100,
            extensions: ['jpg', 'jpeg', 'png', 'gif'],
            templates: {
                box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
                item: '<li class="jFiler-item" style="width:200px;float:left;">\
		                        <div class="jFiler-item-container">\
		                        <div class="jFiler-item-inner">\
		                            <div class="jFiler-item-thumb">\
		                                <div class="jFiler-item-status"></div>\
		                                <a href="#"  class="'+obj.slice(1)+'">{{fi-image}}</a>\
		                            </div>\
		                             <div class="jFiler-item-assets jFiler-row">\
                                        <ul class="list-inline pull-left">\
                                            <li>{{fi-progressBar}}</li>\
                                        </ul>\
                                        <ul class="list-inline pull-right">\
                                            <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                        </ul>\
                                    </div>\
		                        </div>\
		                    </div>\
               			 </li>',
                itemAppend: '<li class="jFiler-item" style="width:50%;float:left;">\
			                        <div class="jFiler-item-container">\
			                            <div class="jFiler-item-inner">\
			                                <div class="jFiler-item-thumb">\
			                                    <div class="jFiler-item-status"></div>\
			                                    <a href="" data-rel="colorbox" class="cboxElement">{{fi-image}}</a>\
			                                </div>\
			                                 <div class="jFiler-item-assets jFiler-row">\
                                                <ul class="list-inline pull-left">\
                                                    <li><span class="jFiler-item-others">{{fi-icon}}</span></li>\
                                                </ul>\
                                                <ul class="list-inline pull-right">\
                                                    <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                                </ul>\
                                            </div>\
			                            </div>\
			                        </div>\
			                    </li>',
                itemAppendToEnd: false,
                removeConfirmation: true,
                _selectors: {
                    list: '.jFiler-items-list',
                    item: '.jFiler-item',
                    remove: '.jFiler-item-trash-action'
                }
            },
            //files: communityMapList,
            onSelect:function(file){
                // 区分图片类型
                //var fileindex = 0;
                file.fileindex = fileindex++;
                file.paramName = paramname;
                files.push(file);
                fs.push(file);
            },
            onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){
                if(file.fileid){
                    delFileIds.push(file.fileid);
                    itemEl.fadeOut("fast", function() {
                    });
                }else{
                    for(var i = 0; i < files.length; i++){
                        if(files[i] != null && files[i].fileindex == file.fileindex){
                            files.splice(i,1);
                        }
                    }
                    for(var i = 0; i < fs.length; i++) {
                        if(fs[i] != null && fs[i].fileindex == file.fileindex) {
                            fs.splice(i, 1);
                        }
                    }
                }
            }
        });
    };
    uploadDropzone("#imgFile", '', 5, "file", bx_files);
</script>
</html>