Markdown editors are simple and user-friendly text-to-HTML conversion tools for developers & web content writers. Hellomrbigshot introduced a simple and elegant markdown editor made with Vue js, that you can easily utilize in your project.

Installation

You can install it via npm or yarn.

Yarn

yarn add simple-m-editor

Npm

npm install --save simple-m-editor

Usage

Next, You have to append the class “m-editor-preview” to your element to use the same style as the editor shows.

<template>
<div>
  <m-editor
    v-model="text"
    @on-change="handleChange"
  />
  <div class="m-editor-preview" v-html="markdownContent"></div>
</div>
</template>
import mEditor from 'simple-m-editor'
import 'simple-m-editor/dist/simple-m-editor.css'
export default {
  component: {
    mEditor
  },
  data () {
    return {
      text: '',
      markdownContent: ''
    }
  },
  methods: {
    handleChange(data) {
      this.markdownContent = data.htmlContent
    }
  }
}

Props

name	type	default	description
value	String	-	value
placeholder	String	-	placeholder
mode	live	String	one of [‘live’, ‘edit’, ‘preview’]
full-screen	Boolean	false	full screen or not
show-line-num	Boolean	true	show side line number or not
theme	String	light	light or dark
auto-scroll	Boolean	true	auto scroll or not

Events

name	params	description
onChange	Object: { content, htmlContent }	change event

If you want to dig more about this package you can visit its documentation on Github.