|
|
|
@ -1,63 +1,235 @@ |
|
|
|
{{template "header" .}} |
|
|
|
<meta name="keywords" content="{{.Blog.Title}}"> |
|
|
|
<title>{{.Blog.Title}} - 码农随笔</title> |
|
|
|
<script src="/static/js/wangEditor.min.js"></script> |
|
|
|
<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> |
|
|
|
<style> |
|
|
|
.modal_form{ |
|
|
|
display: flex; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
.modal_form .span-lable{ |
|
|
|
display: inline-block; |
|
|
|
width: 100px; |
|
|
|
height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<body> |
|
|
|
<div class="root-container"> |
|
|
|
<div class="root-container" id="vue-app"> |
|
|
|
<div class="blog-title"> |
|
|
|
<i-input type="text" v-model="blog.Title" placeholder="请输入文章标题"/> |
|
|
|
<input type="text" id="blog-title" placeholder="请输入文章标题" value="{{.Blog.Title}}"> |
|
|
|
<button type="button" id="newBtn" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm " style="border-radius: 12px"> |
|
|
|
<button type="button" id="newBtn" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm " |
|
|
|
style="border-radius: 12px"> |
|
|
|
发布文章 |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div id="editor" class="editor"> |
|
|
|
<mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="blog.BlogValue" @imgAdd="$imgAdd" |
|
|
|
@save="saveHandler" @change="changeHandler" ref=md></mavon-editor> |
|
|
|
|
|
|
|
</div> |
|
|
|
<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 tobj = {} |
|
|
|
var storage = window.localStorage |
|
|
|
var E = window.wangEditor |
|
|
|
var editor = new E('#editor') |
|
|
|
editor.customConfig.uploadImgServer = '/file/upload' |
|
|
|
// 或者 var editor = new E( document.getElementById('editor') ) |
|
|
|
editor.customConfig.uploadImgHooks = { |
|
|
|
customInsert: function (insertImg, result, editor) { |
|
|
|
insertImg(result.Data); |
|
|
|
} |
|
|
|
<style> |
|
|
|
.v-note-wrapper { |
|
|
|
height: 100%; |
|
|
|
z-index: 99 !important; |
|
|
|
} |
|
|
|
editor.create() |
|
|
|
document.onkeydown = keyDown; |
|
|
|
</style> |
|
|
|
<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.lables = this.blog.Lables |
|
|
|
this.getCatas() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
okHandler (){ |
|
|
|
this.loading = true |
|
|
|
this.loading = false |
|
|
|
$.post('/api/blog/edit', tobj, |
|
|
|
function (data) { |
|
|
|
if (data.Status == 0) { |
|
|
|
storage.removeItem("blogHtml"); |
|
|
|
storage.removeItem("blogTitle"); |
|
|
|
layer.msg("保存成功", {icon: 6}); |
|
|
|
callback(true) |
|
|
|
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) |
|
|
|
} |
|
|
|
|
|
|
|
function keyDown(e) { |
|
|
|
var currKey = 0, e = e || event || window.event; |
|
|
|
currKey = e.keyCode || e.which || e.charCode; |
|
|
|
if (currKey == 83 && (e.ctrlKey || e.metaKey)) { |
|
|
|
saveBlog() |
|
|
|
return |
|
|
|
} |
|
|
|
}, '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 |
|
|
|
}, |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
function saveBlog() { |
|
|
|
var title = $("#blog-title").val(); |
|
|
|
if (title.trim().length < 3) { |
|
|
|
layer.msg('文章标题最少三个字', function () { |
|
|
|
}); |
|
|
|
return |
|
|
|
} |
|
|
|
tobj.title = $("#blog-title").val(); |
|
|
|
if (editor.txt.html().trim().length == 0) { |
|
|
|
layer.msg('文章内容不能为空哦', function () { |
|
|
|
}); |
|
|
|
return |
|
|
|
} |
|
|
|
tobj.blogHtml = editor.txt.html(); |
|
|
|
tobj.blogDesc = editor.txt.text().substring(0,200) |
|
|
|
storage.setItem("blogHtml", tobj.blogHtml); |
|
|
|
storage.setItem("blogTitle", tobj.title); |
|
|
|
layer.open({ |
|
|
|
type: 2, |
|
|
|
title: '发布文章', |
|
|
|
@ -67,40 +239,5 @@ |
|
|
|
content: '/iframe/blog.html?id={{.Blog.Id}}' //iframe的url |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
$(function () { |
|
|
|
editor.txt.html({{.Blog.BlogHtml}}); |
|
|
|
tobj.id = {{.Blog.Id}}; |
|
|
|
tobj.catory = {{.Blog.CategoryId}}; |
|
|
|
tobj.labels = [] |
|
|
|
console.log({{.Blog.Lables}}) |
|
|
|
{{range .Blog.Lables}} |
|
|
|
tobj.labels.push({{.Title}}) |
|
|
|
{{end}} |
|
|
|
var height = document.documentElement.clientHeight |
|
|
|
$(".w-e-text-container").height(height - 50 - 40 - 1); |
|
|
|
$("#newBtn").click(function () { |
|
|
|
saveBlog() |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
function saveBlogCallback(callback) { |
|
|
|
$.post('/api/blog/edit', tobj, |
|
|
|
function (data) { |
|
|
|
if (data.Status == 0) { |
|
|
|
storage.removeItem("blogHtml"); |
|
|
|
storage.removeItem("blogTitle"); |
|
|
|
layer.msg("保存成功", {icon: 6}); |
|
|
|
callback(true) |
|
|
|
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') |
|
|
|
} |
|
|
|
</script> |
|
|
|
</html> |
mail_yanpeng@163.com
hace 4 años