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 --save

Use

• 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 | | 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();

• examples/index.vue

• simplemde.js

Markdown style

e.g. use Github's markdown style

github-markdown-css

install

$ npm install --save github-markdown-css

use

<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.

Dark Theme

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