Vue整合Markdown编辑器

我是一张图

由于项目是资源管理系统，会使用到富文本编辑器，我们选择了百度UEditor和Markdown两款编辑器。这里先介绍一下Markdown编辑器的整合。

第一步： 安装Markdown插件

插件GitHub地址

npm install mavon-editor --save

第二步：调用插件

我们只需要在我们需要使用Markdown的页面引入插件，如果使用页面比较多的话，建议全局引入。这里我们仅在Markdown页面引入。

<template>
  <div>
    <mavon-editor></mavon-editor>
  </div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
  name: "Markdown",
  components: {
    mavonEditor
  }
};
</script>

第三步：运行项目，查看效果

npm run serve

Markdown编辑器

第四步：编辑器默认值和图片上传

<mavon-editor :value="msg" @imgAdd="uploadImg"></mavon-editor>

  methods: {
    uploadImg(pos, file) {
        var formData = new FormData();
        formData.append('image', file);
        this.$axios({
            url: '文件服务器地址',
            method: "post",
            data: formData,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then((url) => {
            //使用服务器返回的图片地址替换原图片地址
            $vm.$img2Url(pos, url);
        })
    }
  }

上传图片

Markdown编辑器的简单使用暂时就到这里，若你还需要更多的操作，比如实时保存编辑器内容、删除图片后的回调等等，可以参考插件作者给出的文档。