让我们用mavon-editor开发博客系统

mavon-editor的安装

npm install mavon-editor --save

import mavonEditor from 'mavon-editor'  
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)  

mavon-editor的使用

<mavon-editor  @imgAdd='editorUpdataImgs'  v-model="article.content"/>

editorUpdataImgs(filename,file){  
//上传图片
    var formData = new FormData();
    formData.append('file', file,file.name);
    let config = {
        headers:{'Content-Type':'multipart/form-data'},
        emulateJSON:true
    }; 
    this.$http.post(servicePath +'uplode/userHead',formData,config).then(function(response){   
        if (response.body.message) {  
            this.$refs.editor.$img2Url(filename,response.body.data);//更改图片内文章上传地址     
        }else{

        }
    },function(response){       
        this.$message.error('抱歉!图片上传失败!请来联系管理员');
    });
}

使用marked将markdown语法解析成html并且高亮代码

安装marked插件

npm install marked --save
var renderer = new marked.Renderer();

安装highlight.js

import highlightJs from 'highlight.js';

开始使用

  marked.setOptions({
        highlight: (code) => highlightJs.highlightAuto(code).value
 })

渲染数据

 let highlight_code = marked(response.body.data.content)
 this.message_text = highlight_code; 

转载自 我的博客-九零码农