Press "Enter" to skip to content

Vue Component for Markdown Editing and Preview using Vuetify.js

vuetify-markdown-editor is a Vue.js component for markdown editing and previewing using Vuetify.js and markdown-it.

vue markdown editor wysiwyg, vuetify markdown editor, best vue markdown editor, markdown editor example, nuxt markdown editor, preview markdown vscode, markdown editor online

Features

  • TypeScript support
  • Single and Embedded Mode
  • Editor-only mode and Editor-Preview
  • Code highlighting
  • Choose emoji
  • math formula (see markdown-it-texmath)
  • Upload and preview images (to use the uploaded image in markdown, use the file name as a link)
  • Mermaid outline view (use code block with a mermaid)

Markdown Editor Based On The Ace And Bootstrap Editor | codeparlMarkdown

How to make use of it:

Install and download:

yarn add @nuxtjs/vuetify -D
# OR
npm install @nuxtjs/vuetify -D

This package can be used in the Node.js module:

<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>

Props

PropDefaultDescription
value''String that binds to the textarea
mode'preview'Possible value 'editor''preview' or 'viewer'. When set to 'editor' or 'viewer', only the editor or viewer is displayed, while 'preview' mode displays both.
renderConfigundefinedOverride default configurations
outlinefalseThe border will be outlined instead of card style
colorundefinedThe outline and icon’s color
nativeEmojifalseUse native emoji instead of pictures
emojitrueEnable emoji input
emojiSet"apple"Supported emoji sets: 'apple', 'google', 'twitter', 'facebook'
imagetrueEnable image upload
fileTarget'/'Image upload target uri
fileFilterfile => file.type.startsWith('image')Allow only specific files. Return true to allow, false to reject
baseUrl'/'The baseUrl for uploaded images. Must end with a slash (mainly used in viewer mode)

Editing and Previewing Markdown, vuetify-markdown-editor Plugin/Github, markdown preview enhanced, github markdown preview


See Demo And Download

Official Website(DCsunset): Click Here

This superior jQuery/javascript plugin is developed by DCsunset. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.