vue-inscrybmde
v0.1.4
Published
InscrybMDE - Markdown Editor component for Vue.js
Downloads
9
Readme
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
import Vue from 'vue'
import VueSimplemde from 'vue-inscrybmde'
import 'inscrybmde/dist/inscrybmde.min.css'
Vue.use(VueSimplemde)
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>
Editor Theme (inscrybmde-theme-base)
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