vue-editable-markdown

Click to edit textarea with markdown support.

Install

npm i vue-editable-markdown

Usage

<template>
  <editable-markdown mode="dark" :source="source" v-model="source" @blur="someFunction" />
</template>

<script>
import EditableMarkdown from "vue-editable-markdown"
export default {
  components: {
    EditableMarkdown
  },
  data () {
    return {
      source: "### Example"
    }
  },
  methods: {
    someFunction () {
      console.log("It's worked.")
    }
  }
}
</script>

Features

• Dark/Light mode
• Markdown Support(table,syntax highlighting...)
• GitHub Flavored Markdown Style

Props

| Prop | Options | Required | Default | |-------- |----------------- |---------- |--------- | | mode | dark | light | false | light | | source | markdown string | false | empty string |

Event

@blur : Called when textarea blurred.

Customization

You can override following classnames for changing components background color and of course you can also use DevTools to find classnames and editing them.

.light.md-text-container {
    background-color: transparent !important; /* your favourite color */
}

.dark.md-text-container {
    background-color: #000 !important;  /* your favourite color */
}