如何使用富文本编辑器，以及在页面中展示为markdown格式

<!--
 * @Author: your name
 * @Date: 2021-08-18 17:35:04
 * @LastEditTime: 2021-08-19 11:24:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \new map\src\views\markdom2.vue
-->
<template>
  <div>
    <mavon-editor
      :toolbars="toolbars"
      @imgAdd="handleEditorImgAdd"
      @imgDel="handleEditorImgDel"
      style="height:600px"
      v-model="value"
      @change="change"
      ref="md"
    />
    <button v-text="is_false ? '编写模式' : '阅读模式'" @click="btn"></button>
  </div>
</template>

<script>
import "github-markdown-css/github-markdown.css";
export default {
  name: "markdom2",
  props: [""],
  data() {
    return {
      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: false, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: false, // 单双栏模式
        preview: false, // 预览
      },
      blogInfo: {
        blogMdContent: "",
        blogContent: "",
      },
      value: "",
      content: "",
      is_false: false,
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    let dom = document.querySelector(
      ".v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper"
    );
    dom.style.flex = 1;
    let dom2 = document.querySelector(
      ".v-note-wrapper .v-note-panel .v-note-show"
    );
    dom2.style.display = "none";
  },

  methods: {
    //监听markdown变化
    change(value, render) {
      this.html = render;
      this.blogInfo.blogMdContent = value;
      this.blogInfo.blogContent = render;
      this.content = value;
    },
    //上传图片接口pos 表示第几个图片
    handleEditorImgAdd(pos, $file) {
      var formdata = new FormData();
      formdata.append("file", $file);
      this.$axios
        .post("http://localhost:8000/blogs/image/upload/", formdata)
        .then((res) => {
          var url = res.data.data;
          this.$refs.md.$img2Url(pos, url); //这里就是引用ref = md 然后调用$img2Url方法即可替换地址
        });
    },
    handleEditorImgDel() {
      console.log("handleEditorImgDel"); //我这里没做什么操作，后续我要写上接口，从七牛云CDN删除相应的图片
    },
    btn() {
      this.is_false = !this.is_false;
    },
  },

  watch: {
    is_false: function(a, b) {
      console.log(a,b);
      let dom = document.querySelector(
        ".v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper"
      );
      let dom2 = document.querySelector(
        ".v-note-wrapper .v-note-panel .v-note-show"
      );
      // if (!a) {
        dom.style.flex = 1;
        dom.style.display = "block";
        dom2.style.display = "none";
      // } else {
      //   dom.style.display = "none";
      //   dom2.style.display = "block";
      //   dom2.style.flex = 1;
      // }
    },
  },
};
</script>
<style lang="less" scoped></style>

 需要下载的包     "mavon-editor": "^2.9.1",      "github-markdown-css": "^4.0.0",

在main里面引入

import mavonEditor from 'mavon-editor'  //引入mavon-editor 就是上面所安装的
Vue.use(mavonEditor)  //让Vue使用mavonEditor
import 'mavon-editor/dist/css/index.css'

富文本中的功能模块     可以通过css样式实现功能快的隐藏   

.markdown-body > :first-child {
  display: none !important;
} 

如果无用   添加权重