vue + element +tp5 个人博客后台管理小记

主要来介绍下用的几个插件 的使用

1. mavon-editor 基于Vue的markdown编辑器 github项目地址

2. marked 解析预览markdown文本

3. 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

未完待续……