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

1,291 阅读1分钟

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

  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

未完待续……