Vue-SimpleMDE
Markdown Editor component for Vue.js. Support only vue2.x.
Use Setup
No longer support Vue1.x, you can modify to use
Install
npm install vue-simplemde --saveUse
- Internal reference in a single component
<template> <vue-simplemde v-model="content" ref="markdownEditor" /> </template> <script> import VueSimplemde from 'vue-simplemde' export default { components: { VueSimplemde } } </script> <style> @import '~simplemde/dist/simplemde.min.css'; </style>- Global reference
import Vue from 'vue' import VueSimplemde from 'vue-simplemde' import 'simplemde/dist/simplemde.min.css' Vue.component('vue-simplemde', 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-cssuse
<template> <vue-simplemde preview-class="markdown-body" /> </template> <style> @import '~simplemde/dist/simplemde.min.css'; @import '~github-markdown-css'; </style>Highlight
install
$ npm install --save highlight.js use
<template> <vue-simplemde :highlight="true" /> </template> <script> import hljs from 'highlight.js'; window.hljs = hljs; </script> <style> @import '~simplemde/dist/simplemde.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 (simplemde-theme-base)
e.g. use simplemde-theme-base theme
install
$ npm install --save simplemde-theme-base use
<style> @import '~simplemde-theme-base/dist/simplemde-theme-base.min.css'; /* no need import simplemde.min.css */ </style>Configuration
SimpleMD's config
Examples
Dependencies
Licence
vue-simplemde is open source and released under the MIT Licence.
Copyright (c) 2018 F-loat
