Vue-InscrybMDE
Markdown Editor component for Vue.js. Support only vue2.x.
Use Setup
Vue1.x is not supported
Install
npm install vue-inscrybmde --save
Use
- Internal reference in a single component
<template><markdown-editor v-model="content" ref="markdownEditor"></markdown-editor></template><script>import markdownEditor from 'vue-inscrybmde/src/markdown-editor'export default {components: {markdownEditor}}</script><style>@import '~inscrybmde/dist/inscrybmde.min.css';</style>
- Global reference
Vue
Props
property | type | default | describe |
---|---|---|---|
value | String | None | Initial value, v-model binding can be used |
name | String | None | The name of the control. |
preview-class | String | None | Custom preview style class |
autoinit | Boolean | true | Automatic initialization |
highlight | Boolean | false | Is it open to highlight |
sanitize | Boolean | false | HTML that does not render input after opening |
configs | Object | {} | SimpleMDE's config |
Markdown style
e.g. use Github's markdown style
install
$ npm install --save github-markdown-css
use
<template><markdown-editor preview-class="markdown-body"></markdown-editor></template><style>@import '~inscrybmde/dist/inscrybmde.min.css';@import '~github-markdown-css';</style>
Highlight
install
$ npm install --save highlight.js
use
<template><markdown-editor :highlight="true"></markdown-editor></template><script>import hljs from 'highlight.js';window.hljs = hljs;</script><style>@import '~inscrybmde/dist/inscrybmde.min.css';@import '~highlight.js/styles/atom-one-dark.css';/* Highlight theme list: https://github.com/isagalaev/highlight.js/tree/master/src/styles */</style>
inscrybmde-theme-base)
Editor Theme (e.g. use inscrybmde-theme-base theme
install
$ npm install --save inscrybmde-theme-base
use
<style>@import '~inscrybmde-theme-base/dist/inscrybmde-theme-base.min.css';/* no need import inscrybmde.min.css */</style>
Configuration
Configuration is based on InscrybMDE config
Examples
Dependencies
Licence
vue-inscrybmde is open source and released under the MIT Licence.
Copyright (c) 2018 F-loat