<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = path + "/common/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>公众号管理平台</title>
<link rel="shortcut icon" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>css/admin/css/keyset/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>css/admin/css/keyset/theme.css">
<link rel="stylesheet"
	href="<%=basePath%>css/admin/css/keyset/font-awesome.css">
<script type="text/javascript"
	src="<%=basePath%>js/admin/public/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/admin/public/bootstrap.js"></script>
<link rel="stylesheet"
	href="<%=basePath%>css/admin/css/keyset/appmsg.css">
<script charset="utf-8" src="/ratfw/common/other/kingedit/kindeditor.js"></script>
<script charset="utf-8" src="/ratfw/common/other/kingedit/lang/zh_CN.js"></script>
<!-- Demo page code -->
<style type="text/css">
label {
	display: inline-block;
}

.help-inline {
	vertical-align: top;
}

.row {
	padding-top: 20px;
	padding-bottom: 20px;
	margin-left: 30px;
}

.editor-bottom-bar {
	white-space: nowrap;
	border: 1px solid #ccc;
	line-height: 20px;
	font-size: 12px;
	text-align: right;
	margin-right: 5px;
	color: #aaa;
	border-top: 0;
	width: 498px;
}
</style>

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7 "> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8 "> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9 "> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<script type="text/javascript">
	$(function() {
		$("#title").keyup(function() {
			$(".i-title").text($(this).val());
		});
		var isChain = true;
		$("#chain-block-link").click(function() {
			if (isChain) {
				$("#chain-block").show();
				isChain = false;
			} else {
				$("#chain-block").hide();
				isChain = true;
			}
		});
		var isUrl = true;
		$("#url-block-link").click(function() {
			if (isUrl) {
				$("#url-block").show();
				isUrl = false;
			} else {
				$("#url-block").hide();
				isUrl = true;
			}
		});
		var isDesc = true;
		$("#desc-block-link").click(function() {
			if (isDesc) {
				$("#desc-block").show();
				isDesc = false;
			} else {
				$("#desc-block").hide();
				isDesc = true;
			}
		});
	});
</script>
<body class="">
	<!--<![endif]-->


	<div class="content">
		<div class="container-fluid">
			<fieldset>
				<legend>添加多图文</legend>
			</fieldset>
			<input type="hidden" id="ctx" value="<%=request.getContextPath()%>">
			<div class="row">
				<div class="span5 msg-preview">
					<div class="msg-item-wrapper">
						<div id="appmsgItem1" class="msg-item">
							<h4 class="msg-t">
								<span class="i-title">标题</span>
							</h4>
							<p class="msg-meta">
								<span class="msg-date">${currDate}</span>
							</p>
							<div class="cover">
								<p class="default-tip">封面图片</p>
								<img class="i-img" id="imageImg" style="">
							</div>
							<p class="msg-text"></p>
						</div>
						<div class="msg-hover-mask"></div>
						<div class="msg-mask">
							<span class="dib msg-selected-tip"></span>
						</div>
					</div>
				</div>

				<div class="span6" style="width: 800px">
					<div class="msg-editer-wrapper">
						<div class="msg-editer">
							<!-- form表单位置 -->
							<form id="appmsg-form" method="post" class="form" action="${pageContext.request.contextPath }/admin/material/addOrUpdate">
								<div class="control-group">
									<label class="control-label">标题</label><span class="maroon">*</span><span
										class="help-inline">(必填，不能超过64个字)</span>
									<div class="controls">
										<input type="text" value="" id="title" class="span5"
											style="width: 530px;" name="title">
									</div>
								</div>
								<div class="control-group">
									<label class="control-label">封面</label><span class="maroon">*</span><span
										class="help-inline">(必须上传一张图片)</span>
									<div class="controls">
										<div class="cover-area">
											<input type="button" id="image3" value="选择图片" />
											<div class="cover-hd">
												<input id="file_upload" name="file_upload" type="file"
													style="display: none;" width="120" height="30"> <input
													id="coverurl" value="" name="coverurl" type="hidden">
												<!-- 数据库中保存封面图片名称 -->
											</div>
											<p id="upload-tip" class="upload-tip">大图片建议尺寸：360像素 *
												200像素</p>
											<p id="imgArea" class="cover-bd" style="display: none;">
												<img src="" id="img"> <a href="javascript:;"
													class="vb cover-del" id="delImg">删除</a>
											</p>
										</div>
									</div>
								</div>
								<a id="desc-block-link" href="javascript:void(0);">添加摘要</a>
								<p>
								<div id="desc-block" style="display: none;"
									class="control-group">
									<label class="control-label">摘要</label> <span
										class="help-inline">(不能超过120个字)</span>
									<div class="controls">
										<textarea name="summary" id="summary" class="msg-txta"></textarea>
									</div>
								</div>
								<div class="control-group">
									<label class="control-label">正文</label> <span class="maroon">*</span><span
										class="help-inline">(必填，不能超过10000个字符)</span>
									<div class="controls">
										<!--style给定宽度可以影响编辑器的最终宽度-->
										<textarea rows="" cols="" id="maincontent" name="maincontent"></textarea>
									</div>
								</div>
								<a id="chain-block-link" href="javascript:void(0);">添加外链</a>
								<div id="chain-block" style="display: none;"
									class="control-group">
									<label class="control-label">外链地址</label> <span
										class="help-inline">(设置后，点击图文消息，不会进入图文详情，而进入外链所设地址。)</span>
									<div class="controls">
										<input type="text" id="chain" class="span5" value=""
											style="width: 482px;" name="chain">
									</div>
								</div>
								<p>
								<p />
								<a id="url-block-link" href="javascript:void(0);">添加原文链接</a>
								<div id="url-block" style="display: none;" class="control-group">
									<label class="control-label">原文链接</label> <span
										class="help-inline">(在图文详情页面中会生成“阅读原文”链接)</span>
									<div class="controls">
										<input type="text" id="source_url" class="span5" value=""
											style="width: 482px;" name="source_url">
									</div>
								</div>
								<div class="control-group">
									<div class="controls">
										<button id="save-btn" type="submit" class="btn-mine">保存</button>
										<button id="cancel-btn" type="button" class="btn">取消</button>
									</div>
								</div>

								<input id="uid" name="uid" type="hidden" value="886"> <input
									id="action" name="action" type="hidden" value="add">
							</form>
						</div>
						<span class="abs msg-arrow a-out" style="margin-top: 0px;"></span>
						<span class="abs msg-arrow a-in" style="margin-top: 0px;"></span>
					</div>
				</div>

			</div>
		</div>
	</div>
	<script>
		KindEditor
				.ready(function(K) {
					window.editor = K
							.create(
									'#maincontent',
									{
										fileManagerJson : '<%= path %>/common/other/kingedit/jsp/file_manager_json.jsp',
										uploadJson : '<%= path %>/common/other/kingedit/jsp/upload_json.jsp',
										allowFileManager : true,
										width : '515px',
										height : '160px',
										items : [ 'undo', 'redo', '|',
												'preview', 'print', 'template',
												'code', 'cut', 'copy', 'paste',
												'plainpaste', 'wordpaste', '|',
												'justifyleft', 'justifycenter',
												'justifyright', 'justifyfull',
												'insertorderedlist',
												'insertunorderedlist',
												'indent', 'outdent',
												'subscript', 'superscript',
												'clearhtml', 'quickformat',
												'selectall', '|', 'fullscreen',
												'/', 'formatblock', 'fontname',
												'fontsize', '|', 'forecolor',
												'hilitecolor', 'bold',
												'italic', 'underline',
												'strikethrough', 'lineheight',
												'removeformat', '|', 'image',
												'multiimage', 'insertfile',
												'table', 'hr', 'emoticons',
												'pagebreak', 'anchor', 'link',
												'unlink' ]
									});
				});
		KindEditor
				.ready(function(K) {
					var editor = K
							.editor({
								fileManagerJson : '<%= path %>/common/other/kingedit/jsp/file_manager_json.jsp',
								uploadJson : '<%= path %>/common/other/kingedit/jsp/upload_json.jsp',
								allowFileManager : true
							});
					K('#image3').click(
							function() {
								editor.loadPlugin('image', function() {
									editor.plugin.imageDialog({
										imageUrl : K('#coverurl').val(),
										clickFn : function(url, title, width,
												height, border, align) {
											K('#coverurl').val(url);
											$("#imageImg").attr("src", url);
											$(".default-tip").hide();
											editor.hideDialog();
										}
									});
								});
							});
				});
	</script>
</body>
</html>
