vue + element +tp5 個人部落格後臺管理小記

恍然如夢發表於2018-10-13
Vue

主要來介紹下用的幾個外掛 的使用

  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

未完待續……


相關文章