美文网首页javascript
mavonEditor ---基于Vue的markdown编辑器

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

作者: ysp123 | 来源:发表于2018-09-29 15:25 被阅读0次

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使用,配置安装,参数

相关文章

网友评论

    本文标题:mavonEditor ---基于Vue的markdown编辑器

    本文链接:https://www.haomeiwen.com/subject/fmxboftx.html