vuetify-markdown-editor

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

[x] Fix SSR
[x] Allow to change sets of emoji
[x] Add typescript support
[x] Add copy icon
[x] 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

DCsunset / vuetify-markdown-editor

readme