Markdown Editor component for Vue.js. Support only Vue2.x.
No longer support Vue1.x, you can modify to use
npm install vue-easymde --save
yarn add vue-easymde
<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)
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 |
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 |
this.$refs.markdownEditor.easymde.togglePreview();
e.g. use Github's markdown style
$ npm install --save github-markdown-css
$ yarn add github-markdown-css
<template>
<vue-easymde preview-class="markdown-body" />
</template>
<style>
@import "~easymde/dist/easymde.min.css";
@import "~github-markdown-css";
</style>
$ npm install --save highlight.js
$ yarn add highlight.js
<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>
e.g. use simplemde-theme-base theme
$ npm install --save simplemde-theme-base
$ yarn add simplemde-theme-base
<style>
@import "~simplemde-theme-base/dist/simplemde-theme-base.min.css";
/* no need import simplemde.min.css */
</style>
Configuration is based on EasyMDE config
vue-easymde is open source and released under the MIT Licence.
Copyright (c) 2018 F-loat
Copyright (c) 2019 Ilya Nikulin