256 lines
10 KiB
HTML
256 lines
10 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">
|
||
<link href="/assets/editor-md/css/editormd.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/axios/axios.min.js"></script>
|
||
<script src="/assets/editor-md/lib/jquery.min.js"></script>
|
||
<script src="/assets/editor-md/editormd.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" . }
|
||
|
||
<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="2" v-model="article.title"></v-textarea>
|
||
<v-textarea outlined label="子标题" rows="2" v-model="article.subTitle"></v-textarea>
|
||
<v-textarea outlined label="概要" rows="2" v-model="article.previous"></v-textarea>
|
||
<!-- <v-textarea outlined label="标签" rows="2" v-model="article.tags"></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%">
|
||
<div id="editor"></div>
|
||
</v-sheet>
|
||
</v-col>
|
||
|
||
|
||
</v-row>
|
||
</v-container>
|
||
</v-main>
|
||
</v-app>
|
||
</script>
|
||
|
||
<script type="text/x-template" id="content">#{.content}</script>
|
||
|
||
<script>
|
||
var markdownEditor;
|
||
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: 'markdown',
|
||
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 = markdownEditor.getMarkdown(); // 获取 Markdown 源码
|
||
// let src2 = testEditor.getHTML(); // 获取 Textarea 保存的 HTML 源码
|
||
// let previewed = testEditor.getPreviewedHTML(); // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用
|
||
this.article.content = 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() {
|
||
let src1 = markdownEditor.getMarkdown(); // 获取 Markdown 源码
|
||
let src2 = markdownEditor.getHTML(); // 获取 Textarea 保存的 HTML 源码
|
||
let src3 = markdownEditor.getPreviewedHTML(); // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用
|
||
|
||
// console.log(src1);
|
||
// console.log(src2);
|
||
// console.log(src3);
|
||
},
|
||
getArticle(id) {
|
||
return axios.get('/admin/article/get/' + id)
|
||
},
|
||
iniEditor(content) {
|
||
markdownEditor = editormd("editor", {
|
||
width: "100%",
|
||
height: 740,
|
||
path: '/assets/editor-md/lib/',
|
||
// theme: "dark",
|
||
// previewTheme: "dark",
|
||
// editorTheme: "pastel-on-dark",
|
||
markdown: content ? content : '',
|
||
codeFold: true,
|
||
//syncScrolling : false,
|
||
saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
|
||
searchReplace: true,
|
||
//watch : false, // 关闭实时预览
|
||
htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
|
||
//toolbar : false, //关闭工具栏
|
||
// previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
|
||
emoji: true,
|
||
taskList: true,
|
||
tocm: true, // Using [TOCM]
|
||
tex: true, // 开启科学公式TeX语言支持，默认关闭
|
||
flowChart: true, // 开启流程图支持，默认关闭
|
||
sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
|
||
//dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true
|
||
//dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
|
||
//dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true
|
||
//dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
|
||
//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
|
||
imageUpload: true,
|
||
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
|
||
imageUploadURL: "/admin/file/upload",
|
||
// crossDomainUpload:true,
|
||
// onload : function() {
|
||
// console.log('onload', this);
|
||
// //this.fullscreen();
|
||
// //this.unwatch();
|
||
// //this.watch().fullscreen();
|
||
//
|
||
// //this.setMarkdown("#PHP");
|
||
// //this.width("100%");
|
||
// //this.height(480);
|
||
// //this.resize("100%", 640);
|
||
// }
|
||
});
|
||
// $.get('test.md', function(md){
|
||
//
|
||
// });
|
||
|
||
$("#goto-line-btn").bind("click", function () {
|
||
markdownEditor.gotoLine(90);
|
||
});
|
||
|
||
$("#show-btn").bind('click', function () {
|
||
markdownEditor.show();
|
||
});
|
||
|
||
$("#hide-btn").bind('click', function () {
|
||
markdownEditor.hide();
|
||
});
|
||
|
||
$("#get-md-btn").bind('click', function () {
|
||
alert(markdownEditor.getMarkdown());
|
||
});
|
||
|
||
$("#get-html-btn").bind('click', function () {
|
||
alert(markdownEditor.getHTML());
|
||
});
|
||
|
||
$("#watch-btn").bind('click', function () {
|
||
markdownEditor.watch();
|
||
});
|
||
|
||
$("#unwatch-btn").bind('click', function () {
|
||
markdownEditor.unwatch();
|
||
});
|
||
|
||
$("#preview-btn").bind('click', function () {
|
||
markdownEditor.previewing();
|
||
});
|
||
|
||
$("#fullscreen-btn").bind('click', function () {
|
||
markdownEditor.fullscreen();
|
||
});
|
||
|
||
$("#show-toolbar-btn").bind('click', function () {
|
||
markdownEditor.showToolbar();
|
||
});
|
||
|
||
$("#close-toolbar-btn").bind('click', function () {
|
||
markdownEditor.hideToolbar();
|
||
});
|
||
|
||
$("#toc-menu-btn").click(function () {
|
||
markdownEditor.config({
|
||
tocDropdown: true,
|
||
tocTitle: "目录 Table of Contents",
|
||
});
|
||
});
|
||
|
||
$("#toc-default-btn").click(function () {
|
||
markdownEditor.config("tocDropdown", false);
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
mounted() {
|
||
let content = document.getElementById('content')
|
||
this.iniEditor(content.innerText)
|
||
},
|
||
vuetify: new Vuetify(),
|
||
})
|
||
|
||
</script>
|
||
|
||
</html> |