Blog Detail

09

Aug
A Simple & Elegant Markdown editor made with Vue.js  cover image

arrow_back A Simple & Elegant Markdown editor made with Vue.js

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.

Published at : 09-08-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project