vue项目接入markdown

原创

粘你一身大鼻嘎 2022-06-23 12:55:41 博主文章分类：Vue ©著作权

文章标签 github 图片上传 html 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者粘你一身大鼻嘎的原创作品，请联系作者获取转载授权，否则将追究法律责任

vue 项目接入 markdown

最近做一个项目，需要在vue项目中接入 markdown 编辑器，其实这个好接，他没有什么特别的样式，男的就是图片的上传。
今天给大家推荐一个插件：mavonEditor
这个是他的github：https://github.com/hinesboy/mavonEditor/blob/master/README.md vue项目接入markdown_github

这个插件支持自定义界面，代码高亮，图片上传等，是我见过最好的一个。
他的使用方法在github上写的很详细，可以去里面看。

安装

安装命令

$ 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)

使用mavonEditor编辑markdown

在需要引入markdown编辑器的界面

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

<script>
export default {
    data() {
        return {
            value: '',
            defaultData: "preview"
        };
    },
};
</script>

vue项目接入markdown_图片上传_02

使用v-html展示markdown

<article v-html="value" ></article>

<script>
export default {
    data() {
        return {//value的值是经过markdown解析后的文本，可使用`@change="changeData"`在控制台打印显示
            value: `<blockquote>
                                    <p>你好</p>
                                    </blockquote>
                                    <p><code>java</code></p>`,
            defaultData: "preview"
        };
    },
    methods: {
    }
};
</script>

图片上传

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
               $vm.$img2Url(pos, url);
           })
        }
    }
}