一.下载安装

npm install mavon-editor --save

二.全局挂载和使用

import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor);

三.组件封装即使用

 <template>
  <div>
    <mavon-editor
      ref="md"
      placeholder="请输入文档内容..."
      :boxShadow="false"
      style="z-index: 1; border: 1px solid #d9d9d9; height: 50vh"
      v-model="content"
      @imgAdd="$imgAdd"
      :toolbars="toolbars"
      @save="saveMavon"
      @change="changeMavon"
    ></mavon-editor>
  </div>
</template>

<script>
export default {
  name: "home",
  components: {},
  props: ["markdownData"],
  data() {
    return {
      content: "", // 文本域的值
      html: "", //上传图片的地址
      markdown: "", //左侧 markdown 内容
      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事件）
        ishljs: false, //代码高亮
        // codeStyle:'agate',
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
    };
  },
  mounted() {},
  //监听编辑的传递的参数解决第一次进入页面，数据不显示的问题
  watch: {
    markdownData(nval, oval) {
      this.content = nval;
    },
  },
  methods: {
    //输入框事件
    changeMavon() {
      this.html = this.$refs.md.d_render;
      this.markdown = this.$refs.md.d_value;
    },
    //获取html md 文档
    saveMavon(value, render) {},
    // 上传图片方法
    async $imgAdd(pos, $file) {
      var _this = this;
      console.log(pos, $file);
      let formdata = new FormData();
      formdata.append("file", $file);
      let result = await this.$axios.post(this.API.UPLOAD_API, formdata);
      if (result.status === "SUCCESS") {
        var url = result.result; //取出上传成功后的url
        console.log(this.$refs.md);
        this.$refs.md.$img2Url(pos, url);
        this.html = _this.$refs.md.d_render;
        this.markdown = _this.$refs.md.d_value;
      }
    },
  },
};
</script>
<style >
.markdown-body{
  width: 94%;
  margin-left: 6% !important;
}
</style>

四.效果展示

五.主要功能和介绍

1.upload 图片上传

// 上传图片方法
    async $imgAdd(pos, $file) {
      var _this = this;
      console.log(pos, $file);
      let formdata = new FormData();
      formdata.append("file", $file);
      let result = await this.$axios.post(this.API.UPLOAD_API, formdata);
      if (result.status === "SUCCESS") {
        var url = result.result; //取出上传成功后的url
        console.log(this.$refs.md);
        this.$refs.md.$img2Url(pos, url);
        this.html = _this.$refs.md.d_render;
        this.markdown = _this.$refs.md.d_value;
      }
    },

代码详解

$imgAdd  是官网提供的方法，当富文本点击上传图片过后调用此方法

formdata  是作为参数上传服务器

上传成功后需要获取到富文本区域的HTML文档和markdown 文本

使用ref 绑定 $refs  获取节点信息，也可以打印tihs 直接查看当前节点信息

md.d_render  是获取他的上传的图片html 节点信息

d_value  是获取到他的markdown  节点信息

注意：d_render 获取到他的图片 html  的时候注意是否为baes64

用我的代码是没有不会存在有baes 64的情况的，我在第一次使用这个插件的时候浏览了很多博主的博客，都存在baes64 的问题

详细插件属性介绍可以参考 mavon-editor官网地址:

https://www.npmjs.com/package/mavon-editorhttps://www.npmjs.com/package/mavon-editor