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 |
| forceSync | Boolean | true | Sync value to simplemde each time |
| highlight | Boolean | false | Is it open to highlight |
| sanitize | Boolean | false | HTML that does not render input after opening |
| configs | Object | {} | SimpleMDE's config |
| previewRender | Function | - | configs.previewRender |
Events
| event | describe | arguments |
|---|---|---|
| input | Triggered when the Input value changes | value |
| blur | Triggered when the Input loses focus | value |
| initialized | Triggered when initialization is complete | simplemde |
Methods
this.$refs.markdownEditor.simplemde.togglePreview();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>e.g.
Configuration
SimpleMD's config
Examples
Dependencies
Licence
vue-simplemde is open source and released under the MIT Licence.
Copyright (c) 2022 F-loat