Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-simplemde with all npm packages installed. Try it out:

var vueSimplemde = require("vue-simplemde")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-simplemde v1.0.6

SimpleMDE - Markdown Editor component for Vue.js

Vue-SimpleMDE

Markdown Editor component for Vue.js. Support only vue2.x.

npm package npm downloads

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

propertytypedefaultdescribe
valueStringNoneInitial value, v-model binding can be used
nameStringNoneThe name of the control.
preview-classStringNoneCustom preview style class
autoinitBooleantrueAutomatic initialization
highlightBooleanfalseIs it open to highlight
sanitizeBooleanfalseHTML that does not render input after opening
configsObject{}SimpleMDE's config
previewRenderFunction-configs.previewRender

Events

propertydescribearguments
inputTriggered when the Input value changesvalue
blurTriggered when the Input loses focusvalue
initializedTriggered when initialization is completesimplemde

Methods

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

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

Screenshot of SimpleMDE Theme Dark

Configuration

SimpleMD's config

Examples

Dependencies

Licence

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

Copyright (c) 2018 F-loat

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free