vue中使用mavonEditor

使用mavonEditor

mavonEditor既可作为markdownw文本编辑使用，也可作为markdown文本解析使用
官方文档：https://github.com/hinesboy/mavonEditor

使用起来也非常简单

首先使用npm install mavon-editor --s安装依赖就能直接使用了

在main,js全局注册

import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";

Vue.use(mavonEditor);

作为编辑器使用：

<template>
  <div>
    <mavon-editor
      v-model="context"
      @imgAdd="$imgAdd"
      @imgDel="$imgDel"
      :toolbars="toolbars"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      context: " ", //输入的数据
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        /* 1.3.5 */
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
      },
    };
  },
  methods: {
    // 绑定@imgAdd event
    $imgAdd() {
      console.log("添加图片");
    },
    $imgDel() {
      console.log("删除图片");
    },
  },
};
</script>

效果图

作为文本解析使用

<template>
  <div id="preview">
    <mavon-editor
      class="md"
      :value="context"
      :subfield="prop.subfield"
      :defaultOpen="prop.defaultOpen"
      :toolbarsFlag="prop.toolbarsFlag"
      :editable="prop.editable"
      :scrollStyle="prop.scrollStyle"
    ></mavon-editor>
  </div>
</template>

<script>
export default {
  data() {
    return {
      context:
        "[连接](https://maosource.com)<br>" +
        "图片<br>" +
        " <img width='200' height='100' alt=文件 src= https://files.maosource.com/20211108/889e273d2c1c44ecad229dd0100564cc.jpg />",
    };
  },
  computed: {
    prop() {
      return {
        subfield: false, // 单双栏模式
        defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true,
      };
    },
  },
};
</script>

效果图