主要来介绍下用的几个插件 的使用
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
未完待续……