快速搞懂前端项目如何集成Markdown插件mavon-editor，并回显数据到网页

柳向明

2023-12-01

前端项目集成mavon-editor的Markdown插件，并回显到网页上

mavon-editor简介

mavon-editor是一款基于Vue的markdown编辑器。

详细使用请参看mavon-editor在码云仓库的介绍：https://gitee.com/zvlance/mavonEditor

mavon-editor的使用

组件引入

安装

	npm install mavon-editor --save

全局引入

一般使用全局引入，如果想使用其他方式引入，推荐上文的码云仓库介绍

main.js

	import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    //vue的使用略......

使用

使用的方式非常简单

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

v-model绑定的就是mavon-editor编辑器中写的md内容。

具体的API参看上文提到的码云仓库

mavon-editor中的图片上传

除了图片上传需要配置图片上传的服务器地址外，其余mavon-editor编辑器中的操作基本不需要配置。

方式1：每次添加图片直接触发上传

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData();
           //这里的'image'即对应的是后台需要接受的参数名，如果有有配置，则需要和后台的参数名对应
           formdata.append('image', $file);
           axios({
               url: 'server url',  //图片上传接口路径
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               // 图片回显到编辑器添加图片的位置
               $vm.$img2Url(pos, url);
               //或者使用以下方式回显
               //this.$refs.md.$img2Url(pos, url);
           })
        },
        $imgDel(pos) {
			//删除图片的业务，可根据具体需求实现
		},
    }
}

方式1：保存时统一上传多张图片

<template>
    <!--点击按钮触发图片统一上传-->
    <button @click="uploadimg">upload</button>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    data(){
        return {
            img_file: {}
        }
    },
    methods: {
        // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 缓存图片信息
            this.img_file[pos] = $file;
        },
        $imgDel(pos){
        	//删除缓存的指定的图片
            delete this.img_file[pos];
        },
        uploadimg($e){
            // 第一步.将图片上传到服务器.
            var formdata = new FormData();
            for(let _img in this.img_file){
                formdata.append(_img, this.img_file[_img]);
            }
            axios({
                url: 'server url',   //图片上传接口路径
                method: 'post',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' },
            }).then((res) => {
                /**
                 * 例如：返回数据为 res = [[pos, url], [pos, url]...]
                 * pos 为原图片标志（0）
                 * url 为上传后图片的url地址
                 */
                 // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                for (var img in res) {
                    // $vm.$img2Url 详情见本页末尾
                    $vm.$img2Url(img[0], img[1]);
                }
            })
        },
    }
}

修改mavon-editor的默认样式

mavon-edito编辑器默认大小样式为 min-height: 300px , min-width: 300px。可通过覆盖直接设置样式，否则默认编辑器的大小不能铺满屏幕。

保存mavon-editor编辑器到数据库

v-model绑定的是mavon-editor编辑器中写的md格式的内容。
但是为了方便到时候将md格式的数据回显到网页上，我们需要将html的数据一并上传到数据库。

this.$refs.md.d_render的值为mavon-editor编辑器生成的html格式的数据（暂定为contentMarkDown），可直接保存在数据库。

this.$refs.md.d_value的值为mavon-editor编辑器生成的md格式的数据暂定为contentHtml），相当于v-model绑定的值。

使用mavon-editor修改上传到数据库中的数据

通过后台接口查询数据库存储的contentMarkDown的数据，令其等于mavon-editor绑定的v-model的值，即可实现md格式的数据回显到mavon-editor的编辑器当中。
ps：具体的查询数据库数据和数据绑定，略…
重新编辑md格式的数据，上传到数据库，但是一定要注意，需要重新生成HTML格式的数据，同步更新contentHtml，否则回显的数据不能得到及时更新。

回显mavon-editor的数据

1.在vue-cli项目中回显

可以直接利用mavon-editor的v-html属性回显，其中contentHtml即为当时保存在数据库中mavon-editor生成的html数据。

	<div class="mavonEditor">
        <mavon-editor v-html="contentHtml"/>
    </div>

向后台发送请求，查询contentHtml，与v-html进行绑定，即可实现回显。

2.在普通的H5网页中回显

还是先查询数据库中contentHtml的数据，然后利用jquery的html()方法或者js的innerHTML属性直接回显html数据。

	<div id="blog-content" class="markdown-body"></div>
	<script>
		$("#blog-content").html(blogDetail.blogInfos.blog.contentHtml);
	</script>

问题

1.回显的html显示问题，没有样式

如果是在vue-cli项目中

在你需要展示html的模块引入import "mavon-editor/dist/css/index.css"

如果是在H5项目

使用cdn引入样式
cdn样式地址：https://cdnjs.com/libraries/github-markdown-css

<link href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.css" rel="stylesheet">

2.mavonEditor 有序无序列表不能显示数字和小原点的问题

问题原因：ul、li、ol等标签的样式被覆盖了
解决：在这个div中重新设置样式

/*解决mavonEditor 有序无序列表不显示 common.css样式冲突*/
ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li {
    list-style: inherit;
}

3.mavonEditor回显图片时，图片大小超出父级div，图片溢出

给回显数据的div的所有img设置max-width,如果超出max-width则图片会进行等比例缩放（一般设置比父级div小一些即可）

我的父级div的id是blog-content

#blog-content img {
    max-width: 800px;
}