您最多选择25个主题
主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
230 行
8.7 KiB
230 行
8.7 KiB
{{template "header" .}}
|
|
<meta name="keywords" content="{{.Blog.Title}}">
|
|
<title>{{.Blog.Title}} - 码农随笔</title>
|
|
<link rel="stylesheet" href="/static/editor/css/index.css">
|
|
<script src="/static/editor/mavon-editor.js"></script>
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="root-container" id="vue-app">
|
|
<div class="blog-title">
|
|
<i-input type="text" v-model="blog.Title" placeholder="请输入文章标题"/>
|
|
</div>
|
|
<mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="blog.BlogValue" @imgAdd="$imgAdd"
|
|
@save="saveHandler" @change="changeHandler" ref=md></mavon-editor>
|
|
|
|
<Modal
|
|
v-model="showModal"
|
|
title="发布文章"
|
|
:mask-closable="false">
|
|
<div class="modal_form">
|
|
<span class="span-lable">文章分类：</span>
|
|
<i-select v-model="blog.CategoryId" style="width:300px">
|
|
<i-option v-for="item in cats" :value="item.Id" :key="item.Id">${ item.Title }</i-option>
|
|
</i-select>
|
|
</div>
|
|
<div class="modal_form">
|
|
<span class="span-lable">文章标签：</span>
|
|
<i-button type="primary" ghost size="small" v-for="item,index in lables" :key="index" style="margin-left: 5px">${item.Title}
|
|
<Icon type="ios-close-circle-outline" @click="delLabel(index)"/>
|
|
</i-button>
|
|
</div>
|
|
<div class="modal_form">
|
|
<span class="span-lable">添加标签：</span>
|
|
<div style="display: inline-block;width: 241px">
|
|
<i-input type="text" v-model="lableTitle" placeholder="请输入标签名称"/>
|
|
</div>
|
|
<i-button type="primary" ghost @click="addLable">添加</i-button>
|
|
</div>
|
|
<div slot="footer">
|
|
<i-button type="error" size="large" long :loading="loading" @click="okHandler">保存</i-button>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var app = new Vue({
|
|
delimiters: ['${', '}'],
|
|
el: '#vue-app',
|
|
components: {
|
|
'mavon-editor': MavonEditor.mavonEditor
|
|
},
|
|
data: {
|
|
loading: false,
|
|
lableTitle: '',
|
|
cats: [],
|
|
lables: [],
|
|
showModal: false,
|
|
blog: {
|
|
Title: '',
|
|
BlogValue: '',
|
|
BlogHtml: ''
|
|
},
|
|
toolbars: {
|
|
bold: true, // 粗体
|
|
italic: true, // 斜体
|
|
header: true, // 标题
|
|
underline: true, // 下划线
|
|
strikethrough: true, // 中划线
|
|
mark: true, // 标记
|
|
superscript: true, // 上角标
|
|
subscript: true, // 下角标
|
|
quote: true, // 引用
|
|
ol: true, // 有序列表
|
|
ul: true, // 无序列表
|
|
link: true, // 链接
|
|
imagelink: true, // 图片链接
|
|
code: true, // code
|
|
table: true, // 表格
|
|
//fullscreen: true, // 全屏编辑
|
|
readmodel: true, // 沉浸式阅读
|
|
htmlcode: true, // 展示html源码
|
|
help: true, // 帮助
|
|
/* 1.3.5 */
|
|
undo: true, // 上一步
|
|
//redo: true, // 下一步
|
|
trash: true, // 清空
|
|
save: true, // 保存（触发events中的save事件）
|
|
/* 1.4.2 */
|
|
navigation: true, // 导航目录
|
|
/* 2.1.8 */
|
|
alignleft: true, // 左对齐
|
|
aligncenter: true, // 居中
|
|
alignright: true, // 右对齐
|
|
/* 2.2.1 */
|
|
subfield: true, // 单双栏模式
|
|
preview: true, // 预览
|
|
menu: true, // 预览
|
|
},
|
|
externalLink: {
|
|
// markdown_css: function() {
|
|
// // 这是你的markdown css文件路径
|
|
// return '/markdown/github-markdown.min.css';
|
|
// },
|
|
katex_css: function () {
|
|
// 这是你的katex配色方案路径路径
|
|
return '/katex/katex.min.css';
|
|
},
|
|
katex_js: function () {
|
|
// 这是你的katex.js路径
|
|
return '/katex/katex.min.js';
|
|
},
|
|
},
|
|
},
|
|
created() {
|
|
this.blog = {{.Blog}}
|
|
if (!this.blog.BlogValue && this.blog.BlogHtml) {
|
|
this.blog.BlogValue = this.blog.BlogHtml
|
|
}
|
|
this.getCatas()
|
|
this.lables = this.blog.Lables
|
|
},
|
|
mounted: function () {
|
|
var _this = this
|
|
this.$refs.md.$on("imgAdd",(pos, $file)=>{
|
|
_this.$imgAdd(pos, $file)
|
|
})
|
|
},
|
|
methods: {
|
|
okHandler (){
|
|
if(!this.blog.CategoryId || this.blog.CategoryId==0){
|
|
this.$Notice.warning({
|
|
title: '文章分类必须选择',
|
|
})
|
|
return
|
|
}
|
|
var _this = this
|
|
this.loading = true
|
|
var tobj = {}
|
|
tobj.id = this.blog.Id
|
|
tobj.title = this.blog.Title
|
|
tobj.blogHtml = this.blog.BlogHtml
|
|
var regex = /(<([^>]+)>)/ig
|
|
tobj.blogDesc = tobj.blogHtml.replace(regex,"").substring(0,200)
|
|
tobj.catory = this.blog.CategoryId
|
|
tobj.blogValue = this.blog.BlogValue
|
|
tobj.labels = []
|
|
this.lables.forEach(el=>{
|
|
tobj.labels.push(el.Title)
|
|
})
|
|
$.post('/api/blog/edit', tobj,
|
|
function (data) {
|
|
_this.loading = false
|
|
if (data.Status == 0) {
|
|
layer.msg("保存成功", {icon: 6});
|
|
window.location.href = "/blog/{{.Blog.Id}}"
|
|
} else if (data.Status == 401) {
|
|
window.location.href = "/login"
|
|
} else if (data.Status == 500) {
|
|
layer.msg("保存失败", {icon: 6});
|
|
callback(false)
|
|
}
|
|
}, 'json')
|
|
},
|
|
addLable(){
|
|
if(!this.lableTitle){
|
|
this.$Notice.warning({
|
|
title: '请先输入标签名称',
|
|
})
|
|
return
|
|
}
|
|
var tobj = {}
|
|
tobj.Title = this.lableTitle
|
|
this.lables.push(tobj)
|
|
this.lableTitle = ''
|
|
},
|
|
delLabel(index){
|
|
this.lables.splice(index,1)
|
|
},
|
|
getCatas(){
|
|
var _this = this
|
|
$.get('/api/cats',
|
|
function (data) {
|
|
if (data.Status == 0) {
|
|
_this.cats = data.Data
|
|
} else if (data.Status == 401) {
|
|
window.location.href = "/login"
|
|
} else if (data.Status == 500) {
|
|
}
|
|
|
|
}, 'json')
|
|
},
|
|
$imgAdd(pos, $file) {
|
|
var _this = this
|
|
// 第一步.将图片上传到服务器.
|
|
var formdata = new FormData();
|
|
formdata.append('image', $file);
|
|
axios({
|
|
url: '/file/upload',
|
|
method: 'post',
|
|
data: formdata,
|
|
headers: {'Content-Type': 'multipart/form-data'},
|
|
}).then((resp) => {
|
|
_this.$refs.md.$img2Url(pos, resp.data.Data);
|
|
})
|
|
},
|
|
changeHandler(value, render) {
|
|
this.blog.BlogValue = value
|
|
this.blog.BlogHtml = render
|
|
// var jsonStr = JSON.stringify(this.blog);
|
|
// window.localStorage.setItem("blog", jsonStr)
|
|
},
|
|
saveHandler(value, render) {
|
|
if (this.blog.Title.trim().length < 3) {
|
|
this.$Notice.warning({
|
|
title: '文章标题最少三个字',
|
|
})
|
|
return
|
|
}
|
|
if (this.blog.BlogValue.trim().length == 0) {
|
|
this.$Notice.warning({
|
|
title: '文章内容不能为空哦',
|
|
})
|
|
return
|
|
}
|
|
this.showModal = true
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
</html>
|