vue-simplemde
    TypeScript icon, indicating that this package has built-in type declarations

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

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

    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

    4,251

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    111 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar