mavonEditor ---基于Vue的markdown编辑器

1、安装mavonEditor

$ npm install mavon-editor --save

 或者

$ yarn add mavon-editor

在main.js中

全局使用

import   mavonEditor   from   'mavon-editor'

import  'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)

使用

<template>

    <div>

            <mavon-editor v-model="form.desc" :subfield="false" :preview="true"></mavon-editor>

    </div>

</template>

2、使用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;

更多mavonEditor使用参考：：https://github.com/hinesboy/mavonEditor/tree/master/doc/cn

包含markdown使用，配置安装，参数