Skip to content

A Vue.js Component for editing and previewing markdown using Vuetify.js

License

Notifications You must be signed in to change notification settings

DCsunset/vuetify-markdown-editor

Repository files navigation

vuetify-markdown-editor

npm version npm downloads GitHub

A Vue.js Component for editing and previewing markdown using Vuetify.js and markdown-it.

Install

npm install vuetify-markdown-editor

Since this component is based on Vuetify, it is required to install and configure Vuetify. For installing Vuetify, please visit https://vuetifyjs.com/en/getting-started/quick-start.

Features

  • TypeScript support
  • Solo and inline mode
  • Editor-only and Editor-Preview mode
  • Code highlighting
  • Emoji picking
  • Math formula (See markdown-it-texmath)
  • Image uploading and previewing (to use uploaded image in markdown, use the filename as the link)
  • Mermaid diagram rendering (use code block with language mermaid)

TODO

  • Fix SSR
  • Allow to change sets of emoji
  • Add typescript support
  • Add copy icon
  • Add viewer mode
  • Fix large image
  • Add self-hosted emoji images
  • Add emoji rendering in rendered text
  • Add more WYSIWYG functions
  • Add plantuml support

Usage

This package can be used in 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>

To show the rendered html only, use viewer mode.

To use the markdown-it renderer directly, use createRenderer to create it.

Exported modules

  • Editor: a vue component to edit markdown
  • createRenderer: a function to create a markdown-it render

Props

Prop Default Description
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.
renderConfig undefined Override default configurations
outline false The border will be outlined instead of card style
color undefined The outline and icon's color
nativeEmoji false Use native emoji instead of pictures
emoji true Enable emoji input
emojiSet "apple" Supported emoji sets: 'apple', 'google', 'twitter', 'facebook'
image true Enable image upload
fileTarget '/' Image upload target uri
fileFilter file => 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)

Other props that are not listed in the above table will be directly passed to v-textarea, which enables you to set the native props in v-textarea.

Default Renderer Configurations

{
  // markdown-it-texmath config
  texmath: undefined,
  // markdown-it-highlightjs config
  hightlightjs: undefined,
  // markdown-it-code-copy config
  codeCopy: {
    buttonClass: 'v-icon theme--dark'
  },
  // The native mermaid config
  mermaid: undefined,
  // Markdown-it config
  markdownIt: undefined
}

Methods

Method Description
upload() Start or resume uploading all files in list
pause() Pause uploading
resume() Resume uploading
focus() Focus on the editor

Properties

Property Description
files Get all files in list in FlowFile format

Test

Clone this repository, and then run:

npm install
npm run serve

Then open http://localhost:8080 in browser to test.

Screenshots

Solo mode: <Editor v-model="text" />

Solo

Dark mode: this.$vuetify.theme.dark = true;

Dark

Outline mode: <Editor outline v-model="text" />

Outline

Dependencies

License

MIT License