vditor轻量级md编辑器

vditor一种轻量级的Markdown编辑器

安装vditor
yarn add vditor 或者 npm install vditor --save

使用

<template>
  <div class="editorRef">
    <div ref="editorRef" class="vditor"></div>
  </div>
</template>
<script >
import { ElMessage } from "element-plus";
import {
  defineComponent,
  onMounted,
  onBeforeUnmount,
  ref,
  nextTick,
  toRefs,
  reactive,
} from "vue";
import Vditor from "vditor";
import "vditor/dist/index.css";
import { getApiUrlNew } from "@/utils/auth";
import upload from "@/utils/upload";
export default defineComponent({
  name: "Vditor",
  filters: {},
  props: {
    contentHtml: {
      type: String,
      default: "",
    },
  },
  setup(porps, content) {
    const state = reactive({
      isMobile: window.innerWidth <= 960,
    });
    const editorRef = ref();
    let instance;
    // 初始化 方法
    function init() {
      instance = new Vditor(editorRef.value, {
        width: state.isMobile ? "100%" : "100%",
        minHeight: 700,
        mode: "sv", //可选模式：sv, ir, wysiwyg
        toolbarConfig: {
          pin: true,
        },
        theme: "classic", //主题：classic, dark
        icon: "material", //图标风格：ant, material
        toolbar: [
          "emoji",
          "headings",
          "bold",
          "italic",
          "strike",
          "link",
          "|",
          "list",
          "ordered-list",
          "check",
          "outdent",
          "indent",
          "|",
          "quote",
          "line",
          "code",
          "inline-code",
          "insert-before",
          "insert-after",
          "|",
          "upload",
          "table",
          "|",
          "undo",
          "redo",
          "|",
          "edit-mode",
          {
            name: "more",
            toolbar: [
              "both",
              "code-theme",
              "content-theme",
              "export",
              "outline",
              "preview",
              "devtools",
              "info",
              "help",
            ],
          },
        ],
        counter: "999999", //允许输入的最大值
        typewriterMode: true,
        cache: {
          enable: false,
          actions: ["desktop", "tablet", "mobile", "mp-wechat", "zhihu"],
          delay: 1000,
          hljs: {
            enable: true,
            lineNumber: false,
            style: "github",
          },
          markdown: {
            autoSpace: false,
            codeBlockPreview: true,
            fixTermTypo: false,
            footnotes: true,
            linkBase: "",
            linkPrefix: "",
            listStyle: false,
            mark: false,
            mathBlockPreview: true,
            paragraphBeginningSpace: false,
            sanitize: true,
            toc: false,
          },
          math: {
            engine: "KaTeX",
            inlineDigit: false,
            macros: {},
          },
          width: "auto",
          mode: "both",
          // index: 999999,
          // outline:{
          //   enable:true,
          //   position:'left'
          // }
        },
        preview: {
          delay: 100,
          show: !state.isMobile,
        },
        after: () => {
         
            instance.setValue(porps.contentHtml);
         
        },
        input: (val) => {
          content.emit("update:contentHtml", val);
        },
        // 这里写上传
        upload: {
          max: 5 * 1024 * 1024,
          // linkToImgUrl: '',
          handler(file) {
            console.log(file);
            upload.uploadFile(getApiUrlNew(), file[0]).then((res) => {
              let type = file[0].type;
              let name = file[0].name;
              onloadCallback(res, type, name);
            });
          },
        },
      });
    }
    const onloadCallback = (oEvent, type, name) => {
      if (oEvent.code != 200) {
        return ElMessage({
          type: "error",
          message: "上传失败,请重新上传",
        });
      }

      let imgMdStr = "";
      if (type.indexOf("image") > -1) {
        imgMdStr = `![](${process.env.VUE_APP_BASE_HOST + oEvent.url})`;
      } else {
        imgMdStr = `![${name}](${process.env.VUE_APP_BASE_HOST + oEvent.url})`;
      }

      if (instance) {
        instance.insertValue(imgMdStr);
      }
    };
   
    // 初始化编辑器
    onMounted(() => {
      nextTick(() => {
        init();
      });
    });
    // 销毁
    onBeforeUnmount(() => {
      instance.destroy();
      instance = null;
    });
    // 获取编辑器内容
    function getEditValue() {
      return instance.getValue();
    }
    return {
      editorRef,
      ...toRefs(state),
      getEditValue,
    };
  },
  computed: {},
  components: {},
  data() {
    return {};
  },
  methods: {},
  mounted() {},
});
</script>
<style lang="scss" scoped>
</style>

详情可参考文档