让我们用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; 

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