您最多选择25个主题
主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
217 行
8.3 KiB
217 行
8.3 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">
|
|
<el-input v-model="blog.Title" placeholder="请输入文章标题"></el-input>
|
|
</div>
|
|
<mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="blog.BlogValue" @imgAdd="$imgAdd"
|
|
@save="saveHandler" @change="changeHandler" ref=md></mavon-editor>
|
|
|
|
<el-dialog title="发布文章" :visible.sync="showModal" width="500px">
|
|
<div class="modal_form">
|
|
<span class="span-lable">文章分类：</span>
|
|
<el-select v-model="blog.CategoryId" placeholder="请选择文章分类" style="width: 310px">
|
|
<el-option v-for="item in cats" :key="item.Id" :label="item.Title" :value="item.Id"/>
|
|
</el-select>
|
|
</div>
|
|
<div class="modal_form">
|
|
<span class="span-lable">文章标签：</span>
|
|
<el-tag v-for="item,index in lables" :key="index" closable @close="delLabel(index)" style="margin-right: 3px">
|
|
${item.Title}
|
|
</el-tag>
|
|
</div>
|
|
<div class="modal_form">
|
|
<span class="span-lable">添加标签：</span>
|
|
<div style="display: inline-block;width: 241px">
|
|
<el-input v-model="lableTitle" placeholder="请输入标签名称"/>
|
|
</div>
|
|
<el-button type="primary" plain @click="addLable">添加</el-button>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="showModal = false">取 消</el-button>
|
|
<el-button type="primary" :loading="loading" @click="okHandler">保存</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</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.$message.error('文章分类必须选择')
|
|
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) {
|
|
_this.$message.success('保存成功')
|
|
window.location.href = "/blog/{{.Blog.Id}}"
|
|
} else if (data.Status == 401) {
|
|
window.location.href = "/login"
|
|
} else if (data.Status == 500) {
|
|
_this.$message.error('保存失败')
|
|
}
|
|
}, 'json')
|
|
},
|
|
addLable(){
|
|
if(!this.lableTitle){
|
|
this.$message.error('请先输入标签名称')
|
|
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
|
|
},
|
|
saveHandler(value, render) {
|
|
if (this.blog.Title.trim().length < 3) {
|
|
this.$message.error('文章标题最少三个字')
|
|
return
|
|
}
|
|
if (this.blog.BlogValue.trim().length == 0) {
|
|
this.$message.error('文章内容不能为空哦')
|
|
return
|
|
}
|
|
this.showModal = true
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
</html>
|