0.5.6 • Published 4 years ago

@tillhub/vue-simplemde v0.5.6

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

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

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

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

Examples

Dependencies

Licence

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

Copyright (c) 2018 F-loat