@bitheral/vue-easymde

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