edit.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <title>站群后台管理系统</title>
  7. <link rel="stylesheet" href="__ROOT__/css/layui.css" media="all">
  8. <script src="__ROOT__/layui.js"></script>
  9. <script src="__ROOT__/lay/modules/jquery.js"></script>
  10. <style>
  11. .upflie {
  12. width: 80px;
  13. height: 28px;
  14. text-align: center;
  15. vertical-align: middle;
  16. border-radius: 1px;
  17. -webkit-border-radius: 2px;
  18. -moz-border-radius: 2px;
  19. color: #fff;
  20. cursor: pointer;
  21. background: #009688;
  22. border: 1px 20px solid #FFFFFF;
  23. outline: none;
  24. position: relative;
  25. display: inline-block;
  26. overflow: hidden;
  27. text-decoration: none;
  28. line-height: 28px;
  29. }
  30. .upflie input {
  31. position: absolute;
  32. font-size: 10px;
  33. width: 200px;
  34. border: none;
  35. cursor: pointer;
  36. right: 0;
  37. top: 0;
  38. opacity: 0;
  39. }
  40. a:hover {
  41. display: inline-block;
  42. color: #fff;
  43. text-decoration: none;
  44. cursor: pointer!important;
  45. opacity: 0.8;
  46. }
  47. .upflie :hover {
  48. display: inline-block;
  49. overflow: hidden;
  50. color: #fff!important;
  51. cursor: pointer;
  52. text-decoration: none;
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <form class="layui-form layui-form-pane" action="{:url('Article/edit')}" style="padding: 30px" method="post" enctype="multipart/form-data">
  58. <input type="hidden" name="id" value="{$db.id}" placeholder="隐藏域id">
  59. <div class="layui-form-item">
  60. <div class="layui-inline">
  61. <label class="layui-form-label">导航栏名称</label>
  62. <div class="layui-input-inline" style="width:400px;">
  63. <select name="column_id" >
  64. {volist name="column" id="vo"}
  65. <option value='{$vo.id}' {if condition="$db['column_id'] eq $vo['id']"} selected="selected"{/if}>{$vo.catename}</option>
  66. {/volist}
  67. </select>
  68. </div>
  69. </div>
  70. <div class="layui-form-item">
  71. <label class="layui-form-label">文章标题</label>
  72. <div class="layui-input-inline" style="width:400px;">
  73. <input type="text" name="title" id="uname" value="{$db.title}" autocomplete="off" class="layui-input">
  74. </div>
  75. </div>
  76. <div class="layui-form-item">
  77. <label class="layui-form-label">关键词</label>
  78. <div class="layui-input-inline" style="width:400px;">
  79. <input type="text" name="keywords" id="uname" value="{$db.keywords}" autocomplete="off" class="layui-input">
  80. </div>
  81. <div class="layui-form-mid layui-word-aux">*多个关键词请用英文逗号分隔</div>
  82. </div>
  83. <div class="layui-form-item">
  84. <label class="layui-form-label">文章作者</label>
  85. <div class="layui-input-inline" style="width:400px;">
  86. <input type="text" name="author" id="upass" value="{$db.author}" autocomplete="off" class="layui-input">
  87. </div>
  88. </div>
  89. <div class="layui-form-item">
  90. <div class="layui-input-inline" style="width:300px;">
  91. <a class="upflie">修改图片
  92. <input type="file" name="pic" id="pic" autocomplete="off" onchange="imgChange()" lay-verify="pics">
  93. </a>
  94. <a class="upflie" style="background-color: white"></a><!-- 为了让修改图片按钮和图片成上下显示,可以忽略 -->
  95. {if condition="$db['pic'] eq '' "}
  96. <img id="imghead" src="/static/admin/images/noimage.png">
  97. {else /}
  98. <img id="imghead" src="__UPLOAD__/{$db.pic}" width="260" height="180">
  99. {/if}
  100. </div>
  101. </div>
  102. <div class="layui-form-item layui-form-text">
  103. <label class="layui-form-label" style="width:1101px">内容</label>
  104. <div class="layui-input-block">
  105. <textarea placeholder="请输入内容" class="layui-textarea" name="content" id="content" style="border:0;padding:0">
  106. {$db.content}
  107. </textarea>
  108. </div>
  109. </div>
  110. <div class="layui-form-item">
  111. <label class="layui-form-label">是否推荐</label>
  112. <div class="layui-input-block">
  113. <input type="radio" name="state" value="0" title="推荐" {if condition="$db['state'] eq 0"} checked {/if}>
  114. <input type="radio" name="state" value="1" title="不推荐" {if condition="$db['state'] eq 1"} checked {/if}>
  115. </div>
  116. </div>
  117. <div class="layui-form-item">
  118. <div class="layui-input-block">
  119. <button type="submit" class="layui-btn" lay-submit lay-filter="sub">立即修改</button>
  120. <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  121. </div>
  122. </div>
  123. </form>
  124. <!-- 百度编辑器配置文件引入 -->
  125. <script type="text/javascript" src="/static/extr/ueditor/ueditor.config.js"></script>
  126. <script type="text/javascript" src="/static/extr/ueditor/ueditor.all.js"></script>
  127. <!-- 实例化编辑器 在需要使用百度编辑的的文本域中加入 id='content'
  128. (例如:<textarea type='text' id="content" name="content" placeholder="请输入邮件内容" class="layui-textarea">)和下面UE中的对应,可以改成自己定义的只要一致就行-->
  129. <script type="text/javascript">
  130. UE.getEditor('content',{initialFrameWidth:1100,initialFrameHeight:500,
  131. toolbars: [  
  132.         [  
  133.         'bold', //加粗  
  134.         'indent', //首行缩进  
  135.         'snapscreen', //截图  
  136.         'italic', //斜体  
  137.         'underline', //下划线  
  138.         'strikethrough', //删除线  
  139.         'formatmatch', //格式刷  
  140.         'horizontal', //分隔线  
  141.         'time', //时间  
  142.         'date', //日期
  143. 'simpleupload', //单图上传
  144. 'insertimage', //多图上传
  145.         'fontfamily', //字体  
  146.         'fontsize', //字号  
  147.         'paragraph', //段落格式  
  148.         'link', //超链接  
  149.         'emotion', //表情  
  150.         'spechars', //特殊字符  
  151.         'searchreplace', //查询替换 
  152.         'forecolor', //字体颜色  
  153.         'backcolor', //背景色  
  154.         'edittip ', //编辑提示  
  155.         'touppercase', //字母大写  
  156.         'tolowercase', //字母小写  
  157. ]]
  158. });
  159. </script>
  160. <script>
  161. layui.use(['form', 'layedit', 'jquery'], function(){
  162. var form = layui.form
  163. ,layer = layui.layer
  164. ,$ = layui.jquery
  165. ;
  166. //表单图片格式验证
  167. form.verify({
  168. pics: [//验证图片格式 ^$:判断为空
  169. /(?:^$|jpg|gif|png|jpeg)$/, '图片上传格式错误'
  170. ],
  171. });
  172. });
  173. </script>
  174. <script>
  175. // 图片显示(添加图片的时候显示当前图片)
  176. function imgChange() {
  177. //在图片 <input type="file" name="pic" id="pic" autocomplete="off" onchange="imgChange()">/*添加一个事件进行操作*/
  178. //<img id="imghead" width="260" height="180" /> <!--图片显示位置-->
  179. //获取点击的文本框
  180. var file =document.getElementById("pic");
  181. var imgUrl =window.URL.createObjectURL(file.files[0]);
  182. var img =document.getElementById('imghead');
  183. img.setAttribute('src',imgUrl); // 修改img标签src属性值
  184. }
  185. </script>
  186. </body>
  187. </html>