234 lines
12 KiB
HTML
234 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Admin Console</title>
|
||
<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
|
||
<link rel="bookmark" href="/assets/favicon.ico" type="image/x-icon" />
|
||
<link href="/assets/vuetify-v2.6.9/vuetify-v2.6.9.min.css" rel="stylesheet" />
|
||
<link href="/assets/vuetify-v2.6.9/materialdesignicons.min.css" rel="stylesheet">
|
||
<link href="/assets/input.css" rel="stylesheet">
|
||
|
||
<script src="/assets/vue/vue.min.js"></script>
|
||
<script src="/assets/vuetify-v2.6.9/vuetify-v2.6.9.min.js"></script>
|
||
<script src="/assets/tinymce5/js/tinymce/tinymce.min.js"></script>
|
||
<script src="/assets/axios/axios.min.js"></script>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app"></div>
|
||
</body>
|
||
<script type="text/x-template" id="app-template">
|
||
<v-app id="inspire">
|
||
#{ render "common/bar-admin.html" . }
|
||
<!-- <#include "../../common/drawer-admin.ftl"> -->
|
||
|
||
|
||
<v-main class="grey lighten-3">
|
||
<v-container style="height: 100%">
|
||
<v-row style="height: 100%">
|
||
<v-col cols="12" sm="2">
|
||
<v-sheet min-height="100%">
|
||
|
||
<v-textarea outlined label="标题" rows="3" v-model="article.title"></v-textarea>
|
||
<v-textarea outlined label="子标题" rows="3" v-model="article.subTitle"></v-textarea>
|
||
<v-textarea outlined label="概要" rows="6" v-model="article.previous"></v-textarea>
|
||
<v-combobox chips clearable multiple solo label="标签" v-model="tags">
|
||
<template v-slot:selection="{ attrs, item, select, selected }">
|
||
<v-chip v-bind="attrs" :input-value="selected" close @click:close="remove(item)">
|
||
<strong>{{ item }}</strong>
|
||
</v-chip>
|
||
</template>
|
||
</v-combobox>
|
||
<!-- <v-btn color="primary" tile @click="publishArticle">发布</v-btn> -->
|
||
<v-btn color="primary" tile @click="saveArticle">保存</v-btn>
|
||
|
||
</v-sheet>
|
||
</v-col>
|
||
|
||
<v-col cols="12" sm="10">
|
||
<v-sheet min-height="100%">
|
||
<textarea id="tinyMceEditor"></textarea>
|
||
<input id="i-files" name="file" type="file" style="display:none"/>
|
||
</v-sheet>
|
||
</v-col>
|
||
</v-row>
|
||
</v-container>
|
||
</v-main>
|
||
</v-app>
|
||
</script>
|
||
|
||
<script type="text/x-template" id="text-template">#{.blogContent}</script>
|
||
|
||
<script>
|
||
var editor;
|
||
|
||
new Vue({
|
||
el: '#app',
|
||
template: '#app-template',
|
||
computed: {
|
||
tags: {
|
||
get() {
|
||
let result = []
|
||
if (this.article.tags.length == 0) {
|
||
return result
|
||
}
|
||
return this.article.tags.split(",")
|
||
},
|
||
set(val) {
|
||
// console.log(val);
|
||
this.article.tags = val.join(",")
|
||
}
|
||
}
|
||
|
||
},
|
||
data: {
|
||
group: null,
|
||
drawer: false,
|
||
loading: false,
|
||
|
||
article: {
|
||
id: '#{.blogArticle.Id}',
|
||
title: '#{.blogArticle.Title}',
|
||
subTitle: '#{.blogArticle.SubTitle}',
|
||
previous: '#{.blogArticle.Previous}',
|
||
contentType: 'tinyMce',
|
||
tags: '#{.blogArticle.Tags}',
|
||
content: null,
|
||
},
|
||
},
|
||
methods: {
|
||
remove(item) {
|
||
let arr = this.article.tags.split(",")
|
||
let idx = this.tags.indexOf(item)
|
||
arr.splice(idx, 1)
|
||
this.tags = arr
|
||
},
|
||
saveArticle() {
|
||
let content = tinyMCE.editors['tinyMceEditor'].getContent();
|
||
|
||
this.article.content = content
|
||
// console.log(this.article.content)
|
||
let url = '/admin/article/submit'
|
||
// if (this.article.id && this.article.id !== '') {
|
||
// url = '/admin/article/update'
|
||
// }
|
||
console.log(this.article)
|
||
|
||
axios.post(url, this.article).then(function (response) {
|
||
console.log(response);
|
||
location.href = '/admin/article'
|
||
}).catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
},
|
||
publishArticle() {
|
||
|
||
},
|
||
initEditor() {
|
||
editor = tinymce.init({
|
||
selector: '#tinyMceEditor',
|
||
language: 'zh_CN',
|
||
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs importword kityformula-editor',
|
||
toolbar: 'undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor codesample table image media charmap emoticons code preview| alignleft aligncenter alignright alignjustify outdent indent | \
|
||
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
|
||
hr pagebreak insertdatetime print | fullscreen | bdmap indent2em lineheight formatpainter axupimgs importword kityformula-editor',
|
||
toolbar_mode: 'sliding',
|
||
toolbar_sticky: true,
|
||
height: 800, //编辑器高度
|
||
min_height: 800,
|
||
autosave_ask_before_unload: true,
|
||
/*content_css: [ //可设置编辑区内容展示的css，谨慎使用
|
||
'/assets/reset.css',
|
||
'/assets/ax.css',
|
||
'/assets/css.css',
|
||
],*/
|
||
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
|
||
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
|
||
// link_list: [
|
||
// // { title: '预置链接1', value: 'http://www.tinymce.com' },
|
||
// // { title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
|
||
// ],
|
||
|
||
//importcss_append: true,
|
||
//自定义文件选择器的回调内容
|
||
file_picker_callback: function (callback, value, meta) {
|
||
let files = document.getElementById('i-files')
|
||
files.click()
|
||
files.onchange = () => {
|
||
let formData = new FormData();
|
||
console.log(files.files);
|
||
for (let index = 0; index < files.files.length; index++) {
|
||
const element = files.files[index];
|
||
formData.append("file", element);
|
||
}
|
||
axios.post('/admin/file/upload', formData, { headers: { "Content-Type": "multipart/form-data" } }).then(res => {
|
||
let data = res.data
|
||
console.log(data)
|
||
// location.href = '/diary'
|
||
callback(`${data.url}`, { text: '附件下载' });
|
||
}).catch(err => {
|
||
console.error(err)
|
||
});
|
||
}
|
||
|
||
|
||
// if (meta.filetype === 'file') {
|
||
// callback('https://www.baidu.com/img/bd_logo1.png', {val:"value", text: 'My text',alt: 'My alt text' });
|
||
// }
|
||
// if (meta.filetype === 'image') {
|
||
// callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
|
||
// }
|
||
// if (meta.filetype === 'media') {
|
||
// callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
|
||
// }
|
||
},
|
||
//为内容模板插件提供预置模板
|
||
templates: [
|
||
// { title: '模板1', description: '介绍文字1', content: '模板内容' },
|
||
// { title: '模板2', description: '介绍文字2', content: '<div class="mceTmpl"><span class="cdate">CDATE</span>，<span class="mdate">MDATE</span>，我的内容</div>' }
|
||
],
|
||
//content_security_policy: "script-src *;",
|
||
extended_valid_elements: 'script[src]',
|
||
//
|
||
template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',
|
||
template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
|
||
image_list: [
|
||
// { title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
|
||
// { title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
|
||
],
|
||
image_class_list: [
|
||
{ title: 'None', value: '' },
|
||
{ title: 'Some class', value: 'class-name' }
|
||
],
|
||
convert_urls: false,
|
||
images_upload_credentials: true,
|
||
// images_upload_base_path: '../',
|
||
images_upload_url: '/admin/file/upload',
|
||
automatic_uploads: true,
|
||
// images_upload_handler: function (blobInfo, succFun, failFun) {
|
||
// // console.log(blobInfo)
|
||
// succFun('/demo/images/img.jpg');
|
||
// },
|
||
//icons:'ax-color',
|
||
init_instance_callback: function (editor) {
|
||
console.log("ID为: " + editor.id + " 的编辑器已初始化完成.");
|
||
let tem = document.getElementById('text-template')
|
||
editor.setContent(tem.outerText)
|
||
}
|
||
});
|
||
}
|
||
|
||
},
|
||
mounted() {
|
||
this.initEditor()
|
||
},
|
||
vuetify: new Vuetify(),
|
||
})
|
||
|
||
|
||
</script>
|
||
|
||
</html> |