vue-markdown-editor

A Vue.js markdown editor component.

Usage

Install

npm install vue-markdown-editor

Dependencies

// Vue library
import Vue from 'vue'
 
// vue-validator
import VueValidator from 'vue-validator'
Vue.use(VueValidator)
 
// vue-transfer-dom
import VueTransferDom from 'vue-transfer-dom'
Vue.use(VueTransferDom)

vue-markdown-editor

JavaScript (ES6):

// load styling
import 'vue-markdown-editor/dist/vue-markdown-editor.css'
 
// load component
import { MarkdownEditor } from 'vue-markdown-editor'
 
// vue root instance example
new Vue({
    el: '#app',
    data () {
        return {
            content: null,
            validator: null,
            markedOptions: {
                highlight: function (code) {
                    return require('highlight.js').highlightAuto(code).value
                }
            }
        }
    },
    methods: {
        submit () {
            if (this.validator.valid) {
                // do stuff
            }
        }
    },
    components: {
        MarkdownEditor
    }
})

Template:

<div id="app">
    <form @submit.prevent="submit">
        <div class="form-group" :class="{ 'has-error': validator && validator.content.invalid }">
            <label for="content">Content</label>
            
            <markdown-editor
                :model.sync="content"
                :validator.sync="validator"
                :marked-options="markedOptions">
            </markdown-editor>
            
            <p class="help-block" 
                v-if="validator" 
                v-for="msg in validator.content.messages">
                {{ msg }}
            </p>
            
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success">Save</button>
        </div>
    </form>
</div>

Build

You can easily build vue-markdown-editor yourself.

Prerequisites

Our build tool of choice is Webpack. You should have webpack installed globally:

npm install -g webpack

And the build dependencies:

npm install

Build

Any of the following will create the files dist/vue-markdown-editor.js and dist/vue-markdown-editor.css.

Production build

Includes minification and several optimizations:

npm run build

Development build

A faster build suited for development, with no optimizations and without minification:

npm run build-dev

Watch

Start an initial development build and then FAST continuous incremental builds:

npm run dev