Vue Markdown Editor component for Vue.js

Vue Markdown Editor component for Vue.js

Markdown Editor component for Vue.js. v-markdown-editor is a simple Markdown editor component for Vue wrapper codemirror

v-markdown-editor is a simple Markdown editor component for Vue wrapper codemirror

Markdown Editor Preview

Demo

Markdown Editor

Install

npm install v-markdown-editor
import 'v-markdown-editor/dist/v-markdown-editor.css';

import Vue from 'vue'
import Editor from 'v-markdown-editor'

// global register
Vue.use(Editor);

Use CDN

<link href="https://cdn.jsdelivr.net/npm/v-markdown-editor/dist/v-markdown-editor.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/v-markdown-editor/dist/v-markdown-editor.min.js" type="text/javascript"></script>

<link href="https://unpkg.com/v-markdown-editor/dist/v-markdown-editor.css" rel="stylesheet">

<script src="https://unpkg.com/v-markdown-editor/dist/v-markdown-editor.min.js" type="text/javascript"></script>

Change

1.2.0
- Support Fontawsome &  Material Design Icons 
- Remove jQuery

Example


<template>
    <div class="container">
        <markdown-editor :options="options"></markdown-editor>
    </div>
</template>


<script>

    export default {

        data() {
            return {
                // default options, see more options at: http://codemirror.net/doc/manual.html#config
                options: {                   
                    // lineNumbers: true,
                    // styleActiveLine: true,
                    // styleSelectedText: true,
                    // lineWrapping: true,
                    // indentWithTabs: true,
                    // tabSize: 2,
                    // indentUnit: 2
                }

            }

        }

    }

</script>

v-model


<template>
    <div class="container">
        <markdown-editor v-model="value"></markdown-editor>
    </div>
</template>


<script>

    export default {

        data() {
            return {
                value: 'Hello world!'
            }

        }

    }

</script>

Toolbar


// full toolbar: clean redo undo | bold italic strikethrough heading | image link | numlist bullist code quote | preview fullscreen

<template>
    <div class="container">
       <markdown-editor toolbar="bold italic heading | image link | numlist bullist code quote | preview fullscreen"></markdown-editor>
    </div>
</template>

add custom button


<template>
    <div class="container">
       <markdown-editor toolbar="bold italic upload" @command:upload="upload" :extend="custom"></markdown-editor>
    </div>
</template>

<script>

    export default {
        data() {
            return {              

                custom: {
                    'upload': {
                        cmd: 'upload',
                        ico: 'fas fa-upload',
                        title: 'Upload File'
                    }
                }
            }
        },

        methods:{

            upload(md){
                md.drawImage({url:'https://i.imgur.com/CbCXhBe.png', title:'this image title'});
            }
        }

    }

</script>

Handle editor


<template>
    <div class="container">
       <markdown-editor ref="md"></markdown-editor>

         <button @click="replace" class="btn btn-primary">Handle</button>

    </div>
</template>


<script>

    export default {

        methods: {          

            replace(){

                // more info: https://codemirror.net/doc/manual.html#api

                this.$refs.md.editor.replaceSelection("Handle editor");
            }
        },  


    }

</script>

Change event

 <markdown-editor @change="onChange"></markdown-editor>

<script>

    export default {

        methods: {          

            onChange(val){
                console.log(val);
            }
        },  


    }

</script>

Auto resize


 <markdown-editor height="auto"></markdown-editor>

Button Theme


 <markdown-editor theme="primary"></markdown-editor>

Demo

Markdown Editor

Source code

nasa8x/v-markdown-editor

vuejs javascript vue-js

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Syntax highlighting with highlight.js for Vue.js 2.x

vue-highlightjs .Vue.js syntax highlighting made easy, using highlight.js.

Vue.js components rendering 3D WebGL graphics reactively with three.js

Vue.js components rendering 3D WebGL graphics reactively with three.js .Vue.js components rendering 3D WebGL graphics reactively with three.js.