Need private packages and team management tools?Check out npm Teams »

vue-simplemde

1.0.4 • Public • Published

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

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

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

Install

npm i vue-simplemde

DownloadsWeekly Downloads

3,319

Version

1.0.4

License

MIT

Unpacked Size

109 kB

Total Files

8

Last publish

Collaborators

  • avatar