概述

mavonEditor是基于Vue的markdown编辑器

#使用通过 npm 命令安装

npm install mavon-editor --save

引入（全局）

import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
            return { value: '' }
        }
    })

局部引入

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
    components: {
        mavonEditor,
    },
     data() {
            return { value: '' }
        }

index.html`

<div id="main">
    <mavon-editor v-model="value"/>
</div>

基本的API

还有其他的配置项，详情信息可以去官网学习：github.com/hinesboy/ma…

编辑功能

按照上诉步骤安装与引用后，就可以出现效果了

<mavon-editor  ref="md" style="height:800px"/>

我这里设置了高度，结果展示如下

完成内容写作后，我们需要获取编辑器的内容，mavonEditor提供了两种内容格式，一是HTML，二是text, 获取HTML内容格式就是通过ref标识,使用一下方法获取

this.$refs.md.d_render

text可以通过之前绑定的value获取

以及同样使用下面方法获取

this.$refs.md.d_value

内容展示

有时候，我们需要将之前编辑器中的内容或文章按照编辑的格式进行展示

同样使用mavonEditor编辑器就可以完成

<mavon-editor  :value="getHtML()" 
                :subfield="false"
                defaultOpen="preview" 
                :toolbarsFlag="false"
                :editable="false" 
                ></mavon-editor>

Js部分

import { marked } from 'marked';
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
    name: 'article',
    components: {
        mavonEditor,
    },
    created() {
       //向后端获取文章内容
        getArticleCotent(this.$route.params.id).then(res => {
            this.text = res.data.result
        })
       
    },
    data() {
        return {
            text: {}
        }
    },
    methods:{
        getHtML(){
            return marked(this.text)
        }
    },

subfield表示是否采用双栏模式（编辑格式与预览格式）

defaultOpen="preview" 开启单栏模式后，需要展示预览格式

:toolbarsFlag="false" 是否开始上面的工具栏显示

:editable="false" 是否开启编辑模式

其中getHtML()传入的格式需要是html才能看到原来的文章格式布局，也就是通过this.$refs.md.d_render 获取的内容

我这里从后端拿到的是text文本格式，通过marked库转换的html

mark下载命令

npm install marked -S

 getHtML(){
            return marked(this.text)
        }

结果图

总结

效果不满意，可以参照官方的文档提高的属性与方法进行修改，mavonEditor的基本使用就介绍到这里

使用mavonEditor完成文本编辑与内容展示

概述