Markdown Editor component for Vue.js
Demo
Install
npm install v-markdown-editor
; // global registerVue;
Require
Bootstrap 4 & Fontawesome
Example
<template> <div class="container"> <markdown-editor :options="options"></markdown-editor> </div></template> <script> { 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> { return value: 'Hello world!' } </script>
Toolbar
// full toolbar: clipboard 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>
Custom submit form input name
<template> <div class="container"> <markdown-editor name="html"></markdown-editor> </div></template>