Add a Markdown Editor to our Vue App

We can add a Markdown editor to our Vue app easily.

With it, users can enter formatted text easily since it can easily be converted to HTML.

In this article, we’ll look at how to add a Markdown editor to our Vue app.

Mavon Editor

The Mavon editor package is an easy to use package for adding a Markdown editor.

We can install it by using NPM with:

npm install mavon-editor --save

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";

Vue.use(mavonEditor);

Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
  <div class="mavonEditor">
    <no-ssr>
      <mavon-editor :toolbars="markdownOption" v-model="handbook"/>
    </no-ssr>
  </div>
</template>

<script>
export default {
  data() {
    return {
      markdownOption: {
        bold: true
      },
      handbook: "#### how to use mavonEditor in nuxt.js"
    };
  }
};
</script>

We add the mavonEditor plugin into the main.js so that we can use it our components.

The CSS is also required so that we can see correct styling.

It binds to a state property with the v-model directive so that we can use the entered text to do something else.

The editor is on the left side and the preview of the Markdown output is on the right side.

Options

It comes with various props that we can set to change the options.

value sets the initial value.

language sets the language for the editor. It can be:

• zh-CN for simplified Chinese
• zh-TW for traditional Chinese
• en for English
• fr for French
• pt-BR for Brazilian Portugese
• ru for Russian
• de for German
• ja for Japanese

fontSize sets the font size.

scrollStyle lets us scroll with the mouse wheel.

boxShadow lets us enable the box shadow for the editor.

boxShadowStyle sets the style for the box shadow.

teransition is a boolean to let is enable or disable transition effects.

previewBackground lets us set the preview pane’s background.

placeholder lets us set the placeholder.

editable lets us set whether the Markdown editor is editable.

imageFilter is a function for filtering for image files.

imageClick is a function that’s run when we click on an image.

toolbars lets us add a toolbar with an object.

For example, we can write:

<template>
  <div class="mavonEditor">
    <mavon-editor :toolbars="toolbars" v-model="handbook"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toolbars: {
        bold: true,
        italic: true,
        header: true,
        underline: true,
        strikethrough: true,
        mark: true,
        superscript: true,
        subscript: true,
        quote: true,
        ol: true,
        ul: true,
        link: true,
        imagelink: true,
        code: true,
        table: true,
        fullscreen: true,
        readmodel: true,
        htmlcode: true,
        help: true,
        undo: true,
        redo: true,
        trash: true,
        save: true,
        navigation: true,
        alignleft: true,
        aligncenter: true,
        alignright: true,
        subfield: true,
        preview: true
      },
      handbook: "#### how to use mavonEditor in nuxt.js"
    };
  }
};
</script>

to add the toolbar icons.

We can do many things with it like any word processor.

Conclusion

Mavon editor is a useful Markdown editor that we can add to our Vue app.