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

`` bash
npm install vue-simplemde --save
`

Use

* Internal reference in a single component

` vue



`

* Global reference

` javascript
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 |
| 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

` js
this.$refs.markdownEditor.simplemde.togglePreview();
`

* examples/index.vue

* simplemde.js

Markdown style

> e.g. use Github's markdown style

github-markdown-css

$3

` bash
$ npm install --save github-markdown-css
`

$3

` vue


`

Highlight

$3


`
$ npm install --save highlight.js
`

$3

` vue


`

Editor Theme (simplemde-theme-base)

> e.g. use simplemde-theme-base theme

$3

`
$ npm install --save simplemde-theme-base
`

$3

` vue

``

$3

Dark Theme

!Screenshot of SimpleMDE Theme Dark

Configuration

> SimpleMD's config

* 中文
* English

Examples

* Simple Example
* Nuxt Example
* Demo Page
* Demo Source

Dependencies

* SimpleMDE

Licence

vue-simplemde is open source and released under the MIT Licence.

Copyright (c) 2022 F-loat