Vue在线编辑和预览组件（vuetify-markdown-editor）

 website 下载

介绍

vuetify-markdown-editor一个Vue.js在线编辑预览组件。由于此组件基于Vuetify，因此需要安装和配置Vuetify。要安装Vuetify，请访问https://vuetifyjs.com/en/getting-started/quick-start。

特征
TypeScript支持
单独和内联模式
仅限编辑器和编辑器预览模式
代码突出显示
表情符号
数学公式
图片上传和预览（要在markdown中使用上传的图片，请使用文件名作为链接）
使用带语言的代码块mermaid

使用方法

<template>
  <v-app>
    <Editor
      mode="preview"
      ref="editor"
      hint="Hint"
      :outline="false"
      :render-config="renderConfig"
      v-model="text"
    />
  </v-app>
</template>

<script>
import { Editor } from "vuetify-markdown-editor";
import { VApp } from 'vuetify/lib';

export default {
  name: "app",
  components: {
    Editor,
    VApp
  },
  data() {
    return {
      text: "",
      renderConfig: {
        // Mermaid config
        mermaid: {
          theme: "dark"
        }
      }
    };
  },
  mounted() {
    // Access properties or methods using $refs
    // this.$refs.editor.focus();
    // this.$refs.editor.upload();

    // Dark theme
    this.$vuetify.theme.dark = true;
  }
};
</script>