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();

インストール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; 

自分のブログを転載します