123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457 |
- <!DOCTYPE html>
- <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Dreamer CMS - 后台管理系统</title>
- <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
- <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
- <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
- <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
- <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
- <link href="/resource/js/editor.md-master/css/editormd.css" rel="stylesheet" type="text/css" />
- <link href="/resource/js/plugins/tagit/jquery.tagit.css" rel="stylesheet" type="text/css" />
- <link href="/resource/js/plugins/tagit/tagit.ui-zendesk.css" rel="stylesheet" type="text/css" />
- <link href="/resource/js/webuploader-0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
- <link href="/resource/js/webuploader-0.1.5/css/style.css" rel="stylesheet" type="text/css" />
- <link href="/resource/js/my97datepicker/skin/WdatePicker.css" rel="stylesheet" type="text/css" />
- <style type="text/css">
- .btns{display:flex;}
- .btns>#ctlBtn{height:32px;margin-left:10px;}
- .file-item{display:flex;align-items: center;height: 30px;font-size:12px;justify-content: space-between;}
- .file-item .file-name,.file-item .file-state{margin:0;padding:0;}
- .file-item .file-name{font-size:12px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; width: 380px;}
- .file-item .state{margin-left:50px;}
- .file-item .close{cursor: pointer;}
- </style>
- </head>
- <body>
- <div class="row">
- <div class="col-md-12">
- <h1 class="panel-heading">编辑文章</h1>
- <!--breadcrumbs start -->
- <ul class="breadcrumb">
- <li><a href="/admin/dashboard/toIndex"><i class="fa fa-home"></i> 首页</a></li>
- <li th:if="${article.categoryCnName != null}"><a href="/admin/category" th:title="${article.categoryCnName}" th:text="${article.categoryCnName}"></a></li>
- <li class="active">编辑文章</li>
- </ul>
- <!--breadcrumbs end -->
- </div>
- </div>
- <section class="panel">
- <div class="panel-body">
- <form class="col s12" id="form1" enctype="multipart/form-data" th:object="${article}" th:action="@{/admin/archives/edit}" onsubmit="return validateForm();" method="post">
- <input name="id" id="id" type="hidden" th:value="*{aid}" />
- <input name="fid" id="fid" type="hidden" th:value="*{id}" />
- <input name="categoryId" type="hidden" th:value="*{categoryId}"/>
- <input name="categoryIds" type="hidden" th:value="*{categoryIds}"/>
- <input name="imagePath" id="filepath" type="hidden" th:value="*{imagePath}" />
- <input th:name="${field.fieldName}" th:id="'input-' + ${field.id}" type="hidden" th:each="field : ${fields}" th:if="${field.dataType} == 'html' or ${field.dataType} == 'markdown'" />
- <input th:name="${field.fieldName}" th:id="'input-' + ${field.id}" th:value="${article[field.fieldName]}" type="hidden" th:each="field : ${fields}" th:if="${field.dataType} == 'file'" />
- <input th:name="${field.fieldName}" th:id="'input-' + ${field.id}" th:value="${article[field.fieldName]}" type="hidden" th:each="field : ${fields}" th:if="${field.dataType} == 'image'" />
- <input th:name="${field.fieldName}" th:id="'input-' + ${field.id}" th:value="${article[field.fieldName]}" type="hidden" th:each="field : ${fields}" th:if="${field.dataType} == 'imageset'" />
- <div class="form-group form-control-medium">
- <label for="title">文章标题:</label>
- <input id="title" name="title" type="text" class="form-control" th:value="*{title}" placeholder="文章标题" />
- </div>
- <div class="form-group form-control-small">
- <label for="weight">权重:</label>
- <input id="weight" name="weight" type="text" class="form-control" th:value="*{weight}" placeholder="权重" />
- </div>
- <div class="form-group form-control-small">
- <label for="clicks">点击:</label>
- <input id="clicks" name="clicks" type="text" class="form-control" th:value="*{clicks}" placeholder="点击数" />
- </div>
- <div class="form-group form-control-medium">
- <label for="properties">自定义属性:</label>
- <label class="checkbox-inline">
- <input type="checkbox" name="properties" id="h" value="h" th:checked="${#strings.contains(article.properties,'h')}" /> 头条[h]
- </label>
- <label class="checkbox-inline">
- <input type="checkbox" name="properties" id="b" value="b" th:checked="${#strings.contains(article.properties,'b')}" /> 加粗[b]
- </label>
- <label class="checkbox-inline">
- <input type="checkbox" name="properties" id="f" value="f" th:checked="${#strings.contains(article.properties,'f')}" /> 幻灯[f]
- </label>
- <label class="checkbox-inline">
- <input type="checkbox" name="properties" id="p" value="p" th:checked="${#strings.contains(article.properties,'p')}" /> 图片[p]
- </label>
- </div>
- <div class="form-group form-control-medium">
- <label for="imagePath">缩略图:</label>
- <div id="uploader" class="wu-example">
- <!--用来存放文件信息-->
- <div id="file-priview" class="file-priview">
- <img th:src="${system.website} + 'resources/' + ${system.uploaddir} + '/' + *{imagePath}" th:if="*{imagePath} != null and *{imagePath} != ''" />
- </div>
- <div class="btns">
- <div id="picker">选择文件...</div>
- </div>
- </div>
- </div>
- <div class="form-group form-control-medium">
- <label for="categoryId">所属栏目:</label>
- <input id="categoryId" type="text" class="form-control" th:value="*{categoryCnName}" readonly="readonly">
- </div>
- <div class="form-group form-control-medium">
- <label for="tag">标签:</label>
- <ul id="myULTags">
- <li th:each="item : ${#strings.arraySplit(article.tag,',')}" th:text="${item}"></li>
- </ul>
- </div>
- <div class="form-group">
- <label for="description">内容摘要:</label>
- <textarea id="description" name="description" class="form-control" th:text="*{description}" placeholder="内容摘要"></textarea>
- </div>
- <div th:each="field : ${fields}"
- th:class="${field.dataType} == 'varchar' or ${field.dataType} == 'char' or ${field.dataType} == 'file' or ${field.dataType} == 'select' or ${field.dataType} == 'datetime' or ${field.dataType} == 'imageset' ? 'form-group form-control-medium' : 'form-group'">
- <!-- 提示文字 -->
- <label th:attr="for=${field.id}" th:text="${field.fieldText}+':'"></label>
- <!-- 单行文本框(CHAR和VARCHAR) -->
- <input th:id="${field.id}" th:name="${field.fieldName}" th:value="${article[field.fieldName]}" type="text" class="form-control" th:if="${field.dataType} == 'varchar' or ${field.dataType} == 'char'">
- <!-- 多行文本框(TEXTAREA) -->
- <textarea th:id="${field.id}" th:name="${field.fieldName}" th:text="${article[field.fieldName]}" class="form-control" th:if="${field.dataType} == 'textarea'"></textarea>
- <!-- MARKDOWN -->
- <div class="mdeditor" th:id="'md-editormd-'+${field.id}" th:if="${field.dataType} == 'markdown'"></div>
- <!-- UEDITOR -->
- <script th:id="'ue-editor-'+${field.id}" type="text/plain" style="width:100%;height:320px;" th:if="${field.dataType} == 'html'"></script>
- <input type="hidden" th:id="'ue-editor-value-' + ${field.id}" th:attr="fieldid=${field.id}" th:value="${article[field.fieldName]}" th:if="${field.dataType} == 'html'" />
- <!-- 文件上传(FILE) -->
- <div th:id="'uploader-'+${field.id}" class="wu-example" th:if="${field.dataType} == 'file'">
- <!--用来存放文件信息-->
- <div th:id="'file-priview-'+${field.id}" class="file-priview">
- <div th:text="${system.uploaddir} + '/' + ${article[field.fieldName]}" th:if="${article[field.fieldName]} != null and ${article[field.fieldName]} != ''"></div>
- </div>
- <div class="btns">
- <div th:id="'picker-'+${field.id}">选择文件...</div>
- </div>
- </div>
- <!-- 单选(RADIO) -->
- <div class="row" th:if="${field.dataType} == 'radio'">
- <div class="checkbox-item" th:each="radio : ${#strings.arraySplit(field.defaultValue,',')}">
- <label class="checkbox-inline">
- <input type="radio" th:name="${field.fieldName}" th:id="${field.id}+'-'+${radio}" th:value="${radio}" th:text="${radio}" th:checked="${radio} == ${article[field.fieldName]}" />
- </label>
- </div>
- <div class="clearfix"></div>
- </div>
- <!-- 多选(CHECKBOX) -->
- <div class="row" th:if="${field.dataType} == 'checkbox'">
- <div class="checkbox-item" th:each="checkbox : ${#strings.arraySplit(field.defaultValue,',')}">
- <label class="checkbox-inline">
- <input type="checkbox" th:name="${field.fieldName}" th:id="${field.id}+'-'+${checkbox}" th:value="${checkbox}" th:text="${checkbox}" th:checked="${#strings.contains(article[field.fieldName],checkbox)}" />
- </label>
- </div>
- <div class="clearfix"></div>
- </div>
- <!-- 下拉框(SELECTED) -->
- <select class="form-control m-b-10" th:name="${field.fieldName}" th:if="${field.dataType} == 'select'">
- <option th:each="item : ${#strings.arraySplit(field.defaultValue,',')}" th:text="${item}" th:selected="${radio} == ${article[field.fieldName]}"></option>
- </select>
- <!-- 时间(DATETIME) -->
- <input th:id="${field.id}" th:name="${field.fieldName}" th:value="${article[field.fieldName]}" type="text" class="form-control" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" th:if="${field.dataType} == 'datetime'" />
- <!-- 图片(IMAGE) -->
- <div th:id="'uploader-'+${field.id}" class="wu-example" th:if="${field.dataType} == 'image'">
- <!--用来存放文件信息-->
- <div th:id="'file-priview-'+${field.id}" class="file-priview">
- <img th:src="${system.website} + 'resources/' + ${system.uploaddir} + '/' + ${article[field.fieldName]}" th:if="${article[field.fieldName]} != null and ${article[field.fieldName]} != ''" />
- </div>
- <div class="btns">
- <div th:id="'picker-'+${field.id}">选择文件...</div>
- </div>
- </div>
- <!-- 图集(IMAGESET) -->
- <div th:id="'uploader-'+${field.id}" th:attr="ref=${field.id}" class="wu-example" th:if="${field.dataType} == 'imageset'">
- <!--用来存放文件信息-->
- <div id="imagesetlist" class="uploader-list">
- <div th:id="${state.index}" class="file-item" th:each="file,state : ${#strings.listSplit(article[field.fieldName],',')}">
- <h4 class="file-name" th:attr="filepath=${file},field-id=${field.id}" th:text="${file}"></h4>
- <p class="file-state">已经上传...</p>
- <i class="close fa fa-times-circle" th:onclick="removeFile('[[${state.index}]]');"></i>
- </div>
- </div>
- <div class="btns">
- <div th:id="'picker-'+${field.id}">选择文件...</div>
- <button type="button" onclick="uploadFile();" id="ctlBtn" class="btn btn-default">开始上传</button>
- </div>
- </div>
- </div>
- <div class="form-group">
- <div class="col-lg-3">
- <label for="comment">允许评论:</label>
- <label class="checkbox-inline">
- <input type="radio" name="comment" id="comment-yes" value="1" th:checked="${article.comment} == 1" /> 是
- </label>
- <label class="checkbox-inline">
- <input type="radio" name="comment" id="comment-no" value="0" th:checked="${article.comment} == 0" /> 否
- </label>
- </div>
- <div class="col-lg-3">
- <label for="subscribe">允许订阅:</label>
- <label class="checkbox-inline">
- <input type="radio" name="subscribe" id="subscribe-yes" value="1" th:checked="${article.subscribe} == 1" /> 是
- </label>
- <label class="checkbox-inline">
- <input type="radio" name="subscribe" id="subscribe-no" value="0" th:checked="${article.subscribe} == 0" /> 否
- </label>
- </div>
- <div class="col-lg-3">
- <label for="status">发布状态:</label>
- <label class="checkbox-inline">
- <input type="radio" name="status" id="status-yes" value="1" th:checked="${article.status} == 1" /> 已发布
- </label>
- <label class="checkbox-inline">
- <input type="radio" name="status" id="status-no" value="0" th:checked="${article.status} == 0" /> 未发布
- </label>
- </div>
- <div style="clear:both;"></div>
- </div>
- <div class="form-btn-group-left" shiro:hasAnyPermissions="system:article:toedit,system:article:update">
- <button type="submit" class="btn btn-info">保存</button>
- </div>
- </form>
- </div>
- </section>
- <script src="/resource/js/jquery.min.js"></script>
- <script src="/resource/js/editor.md-master/editormd.min.js"></script>
- <script charset="utf-8" src="/resource/js/ueditor-1.4.3.3/ueditor.config.js"></script>
- <script charset="utf-8" src="/resource/js/ueditor-1.4.3.3/ueditor.all.min.js"></script>
- <script src="/resource/js/plugins/tagit/jquery-ui.min.js"></script>
- <script src="/resource/js/plugins/tagit/tag-it.js"></script>
- <script src="/resource/js/webuploader-0.1.5/webuploader.js"></script>
- <script src="/resource/js/coco-message/coco-message.js"></script>
- <script src="/resource/js/my97datepicker/WdatePicker.js"></script>
- <script th:inline="javascript">
- var fields = [[${fields}]];
- var article = [[${article}]];
- var thumbnailWidth = 178,thumbnailHeight = 178;
- var imagesetUploader = null;
- $(document).ready(function () {
- initUploader(
- "picker",
- "file-priview",
- "filepath",
- {
- title: 'Images',
- extensions: 'gif,jpg,jpeg,bmp,png',
- mimeTypes: 'image/*'
- },
- "IMAGES");
- for(var i = 0;i < fields.length;i++){
- var field = fields[i];
- if(field.dataType == 'markdown'){
- initMdEditor(field.id, "md-editormd-" + field.id, article[field.fieldName]);
- }else if(field.dataType == 'file'){
- initUploader(
- "picker-" + field.id,
- "file-priview-" + field.id,
- "input-" + field.id,
- {},
- "FILES");
- }else if(field.dataType == 'image'){
- initUploader(
- "picker-" + field.id,
- "file-priview-" + field.id,
- "input-" + field.id,
- {
- title: 'Images',
- extensions: 'gif,jpg,jpeg,bmp,png',
- mimeTypes: 'image/*'
- },
- "IMAGES");
- }else if(field.dataType == "imageset"){
- imagesetUploader = WebUploader.create({
- // swf文件路径
- swf: '/resource/js/webuploader-0.1.5/Uploader.swf',
- // 文件接收服务端。
- server: '/upload/uploadFile',
- // 选择文件的按钮。可选。
- compress: false,
- // 内部根据当前运行是创建,可能是input元素,也可能是flash.
- pick: '#picker-' + field.id,
- fileNumLimit: 10,
- // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
- resize: false,
- duplicate:true,
- // 只允许选择图片文件。
- accept: {
- title: 'Images',
- extensions: 'gif,jpg,jpeg,bmp,png',
- mimeTypes: 'image/*'
- }
- });
- // 当有文件被添加进队列的时候
- imagesetUploader.on('fileQueued', function( file ) {
- $("#imagesetlist").append( '<div id="' + file.id + '" class="file-item">' +
- '<h4 class="file-name" filepath="" field-id="' + field.id + '">' + file.name + '</h4>' +
- '<p class="file-state">等待上传...</p>' +
- '<i class="close fa fa-times-circle" onclick="removeFile(\''+file.id+'\')"></i>' +
- '</div>');
- });
- imagesetUploader.on('uploadSuccess', function(file, response) {
- $("#" + file.id + "> .file-state").text("上传成功...");
- $("#" + file.id + "> .file-name").attr("filepath", response.data.filepath).attr("field-id", field.id);
- var crtVal = $("#input-" + field.id).val();
- if(crtVal != null && crtVal != "" && crtVal != "undefined") crtVal += ",";
- $("#input-" + field.id).val(crtVal + response.data.filepath);
- cocoMessage.success("上传成功");
- });
- imagesetUploader.on('uploadError', function( file ) {
- cocoMessage.error("上传失败");
- });
- }
- }
-
- $("input[id^='ue-editor-value-']").each(function(e){
- var fieldid = $(this).attr("fieldid");
- var uevalue = $(this).val();
- var ue = UE.getEditor("ue-editor-" + fieldid);
- window[fieldid] = ue;
- ue.ready(function() {
- if(uevalue != null && uevalue != "" && uevalue != "undefined")
- ue.setContent(uevalue);
- });
- });
-
- $('#myULTags').tagit({
- availableTags: [],
- itemName: 'item',
- fieldName: 'tag'
- });
- });
-
- function initUploader(picker, el, inputEl, accepts, isShowThumb){
- var uploader = WebUploader.create({
- auto: true,
- // swf文件路径
- swf: '/resource/js/webuploader-0.1.5/Uploader.swf',
- // 文件接收服务端。
- server: '/upload/uploadFile',
- // 选择文件的按钮。可选。
- compress: false,
- // 内部根据当前运行是创建,可能是input元素,也可能是flash.
- pick: '#' + picker,
- fileNumLimit: 5,
- // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
- resize: false,
- duplicate:true,
- // 只允许选择图片文件。
- accept: accepts
- });
- uploader.on('fileQueued', function(file) {
- $("#"+el).children().remove();
- if(isShowThumb == "IMAGES"){
- $img = $("<img />");
- uploader.makeThumb( file, function(error, src) {
- if (error) {
- $img.replaceWith('<span>不能预览</span>');
- return;
- }
- $img.attr( 'src', src );
- }, thumbnailWidth, thumbnailHeight );
- $("#"+el).append($img);
- }else{
- $div = $("<div />");
- $div.text(file.name);
- $("#"+el).append($div);
- }
- });
- uploader.on('uploadSuccess', function(file, response) {
- $("#"+el).children().remove();
- if(isShowThumb == "IMAGES"){
- $("#"+el).append($("<img src='"+response.data.url+"'/>"));
- }else{
- $div = $("<div />");
- $div.text(response.data.originalFilename);
- $("#"+el).append($div);
- }
- $("#"+inputEl).val(response.data.filepath);
- uploader.reset();
- cocoMessage.success("上传成功");
- });
- uploader.on('uploadError', function( file ) {
- uploader.reset();
- cocoMessage.error("上传失败");
- });
- }
-
- //上传文件
- function uploadFile(){
- var fileNumbers = imagesetUploader.getFiles().length;
- if (fileNumbers > 0) {
- imagesetUploader.upload();
- } else {
- cocoMessage.error("请选择文件");
- }
- }
- //删除文件上传队列
- function removeFile(id){
- var fileList = imagesetUploader.getFiles();
- console.log(fileList);
- for(var i = 0;i < fileList.length;i++){
- if(fileList[i].id == id){
- imagesetUploader.removeFile(id, true);
- }
- }
- var fieldId = $("#" + id + "> .file-name").attr("field-id");
- var filepath = $("#" + id + "> .file-name").attr("filepath");
- var crtValue = $("#input-" + fieldId).val();
- if(filepath && crtValue){
- var files = crtValue.split(",");
- for(var i = 0;i < files.length;i++){
- if(files[i] == filepath){
- files.splice(i, 1);
- }
- }
- $("#input-" + fieldId).val(files.toString());
- }
- $("#" + id).remove();
- }
-
- function initMdEditor(id, el, content){
- //初始化MD编辑器
- window[id] = editormd(el, {
- width: "100%",
- height: 350,
- path : '/resource/js/editor.md-master/lib/',
- markdown : null,
- codeFold : true,
- saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
- searchReplace : true,
- htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析,为了安全性,默认不开启
- emoji : true,
- taskList : true,
- tocm : true, // Using [TOCM]
- tex : true, // 开启科学公式TeX语言支持,默认关闭
- flowChart : true, // 开启流程图支持,默认关闭
- sequenceDiagram : true, // 开启时序/序列图支持,默认关闭,
- imageUpload : true,
- imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
- imageUploadURL : "/upload/uploadMarkDown",
- onload : function() {
- this.setMarkdown(content);
- }
- });
- }
-
- function validateForm(){
- var title = $("#title").val();
- if(title == null || title == ""){
- cocoMessage.error("标题不能为空");
- return false;
- }
- for(var i = 0;i < fields.length;i++){
- var field = fields[i];
- if(field.dataType == 'markdown'){
- $("#input-"+ field.id).val(window[field.id].getMarkdown());
- }else if(field.dataType == 'html'){//初始化UE编辑器
- $("#input-"+ field.id).val(window[field.id].getContent());
- }
- }
- return true;
- }
- </script>
- </body>
- </html>
|