NikulinIlya / vue-easymde

📝 Vue-EasyMDE - use easy-markdown-editor with vue.js.
MIT License
21 stars 10 forks source link
easymde markdown markdown-editor markdown-parser markdown-to-html markdown-viewer vue vueeasymde vuejs

Vue-EasyMDE

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

npm package npm downloads

readme на русском

Use Setup

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

Install

npm install vue-easymde --save

yarn add vue-easymde

Use

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

Examples

Dependencies

Licence

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

Copyright (c) 2018 F-loat

Copyright (c) 2019 Ilya Nikulin