#override("css") #end #override("body")
<style>
#select6 {
width: 100%;
height: 36px;
}
/*
.tagsClass{
width: 100%;
height: 36px;
min-height:36px;
}*/
</style>
<div class="ibox float-e-margins">
<div class="ibox-content">
<div class="col-sm-12">
<form id="validForm" class="form-horizontal m-t"
novalidate="novalidate">
<div class="form-group">
<label class="col-sm-2 control-label">*栏目：</label>
<div class="col-sm-5">
<select class="form-control" required="" name="categoryId" id="columnList">
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">*分类：</label>
<div class="col-sm-5">
<select class="form-control" required="" name="type">
<option value>请选择</option>
<option value="1">孕期</option>
<option value="2">育儿</option>
<option value="3">其它</option>
</select>
</div>
</div>
<div class="hr-line-dashed" style="display: none;"></div>
<div class="form-group" style="display: none;">
<label class="col-sm-2 control-label">权重：</label>
<div class="col-sm-5">
<input type="number" class="form-control" class="form-control" placeholder="选填" name="weight">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">*标签：</label><button type="button" onclick="addTags()" class="glyphicon glyphicon-plus btn glyphicon btn-primary btn-sm"></button>
<div class="col-sm-5" id="seleArrs">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label" for="">*封面：</label>
<div class="col-sm-5">
<div class="btn-group m-b col-sm-12 ">
<label class="btn btn-sm btn-info w-sm col-sm-3"
onclick="switchContent(1)"> <i
class="fa fa-check text-active" id="commonCon"></i> 普通内容
</label> <label class="btn btn-sm btn-success w-sm col-sm-3"
onclick="switchContent(2)"> <i class="fa text-active"
id="specialCon"></i> 专题内容
</label>
<input type="hidden" value="1" name="contentType" id="contentType">
</div>
<div class="col-sm-12 no-padder" id="container">
<div data-multiple="false"
title="点击上传" id="pickfiles"
class="btn btn-primary btn-upload m-b-sm">
<i class="fa fa-cloud-upload text"></i> 点击上传图片
</div>
<img class="b wrapper-xs w img-responsive" style="width: 200px" id="pickImage"
src="${ctx}/static/images/p0.jpg" />
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">*标题：</label>
<div class="col-sm-5">
<input type="text" ng-maxlength="32" name="title"
class="form-control w-lg" required="" aria-required="true">
</div>
</div>
<div class="form-group" id="linkContent" style="display:none">
<label class="col-sm-2 control-label">*链接：</label>
<div class="col-sm-5">
<input type="text" type="url" name="link" id="linkAddr" class="form-control w-lg">
</div>
</div>
<div class="form-group" id="zaiyaoContent">
<label class="col-sm-2 control-label">*摘要：</label>
<div class="col-sm-5">
<input type="text" maxlength="255" required="" id="introdu" name="introduction" class="form-control w-lg">
</div>
</div>
<div class="form-group" id="zhengwenConent">
<label class="col-sm-2 control-label">正文：</label>
<div class="col-sm-5">
<script id="editor" name="richText" type="text/plain"></script>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-7 col-sm-offset-3 pull-right">
<button type="button" class="btn btn-primary" onclick="save();">
<i class="fa fa-check"></i> 提交
</button>
<button type="button" class="btn btn-white"
onclick="parent.closeAll();">
<i class="fa fa-close"></i> 取消
</button>
</div>
</div>
</form>
</div>
</div>
</div>
#end #extends("/common/base_list.html")
<script type="text/javascript" charset="utf-8" src="${ctx}/static/js/plugins/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/static/js/plugins/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/static/js/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/static/js/plugins/plupload/js/moxie.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/static/js/plugins/plupload/js/plupload.dev.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/static/js/plugins/plupload/js/i18n/zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/static/js/plugins/qiniu/qiniu.min.js"></script>
<script type="text/javascript">
var seleNum = 1;
var optionHtml = "";
function addTags(){
var seleHtml = "<select id='select"+seleNum+"' style='width: 100%;height: 36px;' multiple data-selectator-keep-open='true'>"+optionHtml+"</select>";
$("#seleArrs").append(seleHtml);
$('#select'+seleNum).selectator({
prefix : 'selectator_', // CSS class prefix
height : '36', // auto or element
useDimmer : false, // dims the screen when option list is visible
useSearch : true, // if false, the search boxes are removed and
keepOpen : true, // if true, then the dropdown will not close when
showAllOptionsOnFocus : true, // shows all options if input box is empty
selectFirstOptionOnSearch : true, // selects the topmost option on every search
searchCallback : function(value) {
},
labels : {
search : 'Search...' // Placeholder text in search box in single select box
}
});
//ID累计
seleNum++;
}
function switchContent(num) {
if (num == 1) {//普通内容
$("#commonCon").addClass("fa-check");
$("#specialCon").removeClass("fa-check");
$("#zaiyaoContent").show();
$("#zhengwenConent").show();
$("#linkContent").hide();
$("#contentType").val(1);
//链接不是必须的
$("#linkAddr").removeAttr("required");
$("#introdu").attr("required","");
} else {//专题内容
$("#commonCon").removeClass("fa-check");
$("#specialCon").addClass("fa-check");
$("#zaiyaoContent").hide();
$("#zhengwenConent").hide();
$("#linkContent").show();
//摘要不是必须
$("#introdu").removeAttr("required");
$("#linkAddr").attr("required","");
$("#contentType").val(2);
}
}
function initUpload(){
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4', //上传模式,依次退化
browse_button: 'pickfiles', //上传选择的点选按钮，**必需**
uptoken_url: "${ctx}/ueditor/uploadGetToken", //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
// save_key: true, // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
domain: 'http://img1.healthbaby.com.cn/', //bucket 域名，下载资源时用到，**必需**
get_new_uptoken: false, //设置上传文件的时候是否每次都重新获取新的token
container: 'container', //上传区域DOM ID，默认是browser_button的父元素，
max_file_size: '100mb', //最大文件体积限制
flash_swf_url: '${ctx}/js/plugins/plupload/Moxie.swf', //引入flash,相对路径
max_retries: 3, //上传失败最大重试次数
dragdrop: false, //开启可拖曳上传
chunk_size: '4mb', //分块上传时，每片的体积
auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
init: {
'FileUploaded': function(up, file, info) {
var domain = up.getOption('domain');
var res = JSON.parse(info);
var sourceLink = domain + res.key; //获取上传成功后的文件的Url+
$("#pickImage").attr("src",sourceLink);
}
}
});
}
function initCloumnData(){
$.getJSON("${ctx}/contentCategories/selelist", function(data) {
if (data.success) {
var columnList = "<option value=''>请选择</option>";
data.data.forEach(function(d, i) {
columnList += "<option value='"+d.id+"'>" + d.name + "</option>";
});
$("#columnList").empty();
$("#columnList").append(columnList);
}
});
}
function initTagsData(){
$.get("${ctx}/contentTags/seleList", "json", function(data) {
if (data.success) {
data.data.forEach(function(d, i) {
optionHtml += '<option value="'+d.id+'">' + d.tagName + '</option>';
});
//默认一个选择标签
addTags();
}
});
}
$(function() {
//初始化图片上传插件
initUpload();
//初始化栏目数据
initCloumnData();
//初始化标签数据
initTagsData();
//初始化
var ue = UE.getEditor('editor', {
initialFrameHeight : 200,
initialFrameWidth : "100%"
});
});
function save() {
if ($('#validForm').valid()) {
var data = $('#validForm').serialize();
var pickImgSrc = $("#pickImage").attr("src");
var content = UE.getEditor('editor').getContent();
data+="&content="+content;
if(pickImgSrc.indexOf("p0.jpg")==-1){
data+="&image="+pickImgSrc;
}
for(var i=1;i<seleNum;i++){
data+="&tags["+(i-1)+"]=,"+$("#select"+i).val()+",";
}
ajaxPost(APP.PATH + "/contentArticles/create", data);
parent.reloadGrid('dataTable');
}
}
</script>