vue + element +tp5 個人部落格後臺管理小記
阿新 • • 發佈:2019-02-03
主要來介紹下用的幾個外掛 的使用
-
mavon-editor 基於Vue的markdown編輯器 github專案地址
-
marked 解析預覽markdown文字
-
highlight.js 語法高亮
1. mavon-editor使用
我這裡是全域性註冊使用;也可區域性使用,詳細請看 github
//在main.js 中
import mavonEditor from 'mavon-editor'
Vue.use(mavonEditor);
在vue單檔案中使用
<template> <div id="app"> <div class="title-box"> <el-input v-model="titleText" placeholder="請輸入標題"></el-input> </div> <div class="editor-box"> <mavon-editor style="height: 100%" v-model="value"></mavon-editor> </div> <div style="margin-top: 20px;"> <el-button @click.native="submit" type="primary">發表</el-button> </div> </div> </template>
<script> import {URI_EDITORARTICLE} from 'src/const/uri' export default { data() { return { value: '', titleText:'' } }, components: {}, mounted() { }, methods: { submit() { if(this.titleText && this.value){ this.$ajax.post(URI_EDITORARTICLE, { title:this.titleText, article: this.value }, res => { this.$message.success(res.message); this.titleText=''; this.value=''; }); } } } } </script>
<style scoped>
.editor-box {
height: 500px;
}
.title-box{
margin-bottom: 20px;
}
</style>
2.marked使用
<template> <div> <div class="container"> <div class="markdown-body"> <div v-html="complileMarkdow" v-highlight></div> </div> </div> </div> </template>
<script>
import {URI_GETARTICLEBYID} from 'src/const/uri'
import marked from 'marked'
let renderMd = new marked.Renderer();
marked.setOptions({
renderer: renderMd,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
});
export default {
data() {
return {
markdownValue: '',
}
},
computed: {
complileMarkdow() {
return marked(this.markdownValue, {sanitize: true});
}
},
created() {
this.getArticle();
},
mounted() {
},
methods: {
getArticle() {
this.$ajax.get(URI_GETARTICLEBYID, {
id: this.$route.params.id
}, res => {
this.markdownValue = res.data.article;
});
}
}
}
</script>
3.highlight.js vue 自定義指令使用
import Hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
let HighLight = {};
HighLight.install = function (Vue) {
Vue.directive('highlight', function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block) => {
Hljs.highlightBlock(block)
})
});
}
export default HighLight;
//在main.js 中
import HighLight from './plugins/highlight'
Vue.use(HighLight);
<div class="markdown-body">
<div v-html="complileMarkdow" v-highlight></div>
</div>
本專案預覽地址 賬號密碼都是admin
未完待續……