Vue-EasyMDE

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

readme на русском

Use Setup

No longer support Vue1.x, you can modify to use

Install

npm install vue-easymde --save

yarn add vue-easymde

Use

• Internal reference in a single component

<template>
 <vue-easymde v-model="content" ref="markdownEditor" />
</template>

<script>
 import VueEasymde from "vue-easymde";

 export default {
  components: {
    VueEasymde
  }
 };
</script>

<style>
 @import "~easymde/dist/easymde.min.css";
</style>

• Global reference

import Vue from "vue";
import VueEasymde from "vue-easymde";
import "easymde/dist/easymde.min.css";

Vue.component('vue-easymde', VueEasymde)

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 | {} | EasyMDE's config | | previewRender | Function | - | configs.previewRender |

Events

| event | describe | arguments | | ----| ----- | ---- | | update:modelValue | Triggered when the Input value changes | value | | blur | Triggered when the Input loses focus | value | | initialized | Triggered when initialization is complete | easymde |

Methods

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

examples/index.vue

simplemde.js

Markdown style

e.g. use Github's markdown style

github-markdown-css

install

$ npm install --save github-markdown-css

$ yarn add github-markdown-css

use

<template>
 <vue-easymde preview-class="markdown-body" />
</template>

<style>
 @import "~easymde/dist/easymde.min.css";
 @import "~github-markdown-css";
</style>

Highlight

install

$ npm install --save highlight.js

$ yarn add highlight.js

use

<template>
 <vue-easymde :highlight="true" />
</template>

<script>
 import hljs from "highlight.js";

 window.hljs = hljs;
</script>

<style>
 @import "~easymde/dist/easymde.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

$ yarn add simplemde-theme-base

use

<style>
  @import "~simplemde-theme-base/dist/simplemde-theme-base.min.css";
  /* no need import simplemde.min.css */
</style>

Configuration

Configuration is based on EasyMDE config

• English
• Русский
• 中文

Examples

• Simple Example
• Nuxt Example
• Demo Page
• Demo Source

Dependencies

• EasyMDE

Licence

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

Copyright (c) 2018 F-loat

Copyright (c) 2019 Ilya Nikulin