mavon-editor 使用教程，上传图片，以及配置， 并且接续存储的md格式的数据

mavon-editor是一款基于vue的markdown编辑器，比较适合博客系统。由于官网对于一些细节的说明不够详细，这里对这里对该编辑器的使用做一个总结。

安装

npm install mavon-editor --save

基本使用
在vue-cli构建的脚手架离得main.js可以像这样引用：

// 全局注册
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main'
    })

在具体的组件里html里定义挂载点

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

效果如下

图片上传：
先将挂在点里的方法写好，就像这样

 <mavon-editor
     v-model="form.content"
     ref="md"
     @imgAdd="handleEditorImgAdd"
     @imgDel="handleEditorImgDel"
 />

@imgAdd @imgDel 分别是添加图片和删除图片

具体代码如下

        handleEditorImgAdd (pos, $file) {
            let formdata = new FormData()
            formdata.append('file', $file)
            this.imgFile[pos] = $file
            let instance = this.$axios.create({
                withCredentials: true,
                headers: {
                    Authorization: token   // 我上传的时候请求头需要带上token 验证，不需要的删除就好
                }
            })
            instance.post('/api/upload/fileds', formdata).then(res => {
                if (res.data.code === 200) {
                    this.$Message.success('上传成功')
                    let url = res.data.data
                    let name = $file.name
                    if (name.includes('-')) {
                        name = name.replace(/-/g, '')
                    }
                    let content = this.form.content
                    // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)  这里是必须要有的
                    if (content.includes(name)) {
                        let oStr = `(${pos})`
                        let nStr = `(${url})`
                        let index = content.indexOf(oStr)
                        let str = content.replace(oStr, '')
                        let insertStr = (soure, start, newStr) => {
                            return soure.slice(0, start) + newStr + soure.slice(start)
                        }
                        this.form.content = insertStr(str, index, nStr)
                    }
                } else {
                    this.$Message.error(res.data.msg)
                }
            })
        },
        handleEditorImgDel (pos) {
            delete this.imgFile[pos]
        },

这里需要注意
this.$axios 其实就是 axios 对象，

下边是其他配置

//mavon-editor菜单栏的相关配置
把toolbars 对象绑定到 mavon-editor组件上

toolbars: {
   bold: true, // 粗体
   italic: true, // 斜体
   header: true, // 标题
   underline: true, // 下划线
   strikethrough: true, // 中划线
   mark: true, // 标记
   superscript: true, // 上角标
   subscript: true, // 下角标
   quote: true, // 引用
   ol: true, // 有序列表
   ul: true, // 无序列表
   link: true, // 链接
   imagelink: true, // 图片链接
   code: true, // code
   table: true, // 表格
   fullscreen: true, // 全屏编辑
   readmodel: true, // 沉浸式阅读
   htmlcode: true, // 展示html源码
   help: true, // 帮助
   /* 1.3.5 */
   undo: true, // 上一步
   redo: true, // 下一步
   trash: true, // 清空
   save: false, // 保存（触发events中的save事件）
   /* 1.4.2 */
   navigation: true, // 导航目录
   /* 2.1.8 */
   alignleft: true, // 左对齐
   aligncenter: true, // 居中
   alignright: true, // 右对齐
   /* 2.2.1 */
   subfield: true, // 单双栏模式
   preview: true, // 预览
},

二我选择的是直接将md格式的文本保存到数据库中，然后再将其从数据库中取出来解析。
md格式的文本的解析

使用marked框架来解析。

方法步骤：

npm install marked --save

在组件中引用：

import marked from ‘marked‘

相应的标签：

<div v-html="readmeContent" ></div>

js方法：

//这里的newDate[0].content就是取出来的md格式的文本内容  
this.readmeContent=marked(newData[0].content||‘‘,{
   sanitize:true
})

存在问题：现在纯粹的只是将其解析成了html文件，相应的样式查了下，可以用highlight.js，但折腾了好久都没引用成功，最后为了应急，只能自己手写样式了。等之后再仔细看看marked的官方文档再说…

参考地址
http://www.mamicode.com/info-detail-2644873.html
https://www.jianshu.com/p/78ea4f94a3d0