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>
  <markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>
</template>

<script>
  import markdownEditor from 'vue-simplemde/src/markdown-editor'

  export default {
    components: {
      markdownEditor
    }
  }
</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.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

github-markdown-css

install

$ npm install --save github-markdown-css

use

<template>
  <markdown-editor preview-class="markdown-body"></markdown-editor>
</template>

<style>
  @import '~simplemde/dist/simplemde.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 '~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

• 中文
• 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) 2018 F-loat