Vue-InscrybMDE

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

Use Setup

Vue1.x is not supported

Install

npm install vue-inscrybmde --save

Use

• Internal reference in a single component

<template>
  <markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>
</template>

<script>
import markdownEditor from "vue-inscrybmde/src/markdown-editor";

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

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

• Global reference

import Vue from "vue";
import VueSimplemde from "vue-inscrybmde";
import "inscrybmde/dist/inscrybmde.min.css";

Vue.use(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

Markdown style

e.g. use Github's markdown style

github-markdown-css

install

$ npm install --save github-markdown-css

use

<template>
  <markdown-editor preview-class="markdown-body"></markdown-editor>
</template>

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

Highlight

install

$ npm install --save highlight.js

use

<template>
  <markdown-editor :highlight="true"></markdown-editor>
</template>

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

window.hljs = hljs;
</script>

<style>
@import "~inscrybmde/dist/inscrybmde.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 (inscrybmde-theme-base)

e.g. use inscrybmde-theme-base theme

install

$ npm install --save inscrybmde-theme-base

use

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

Configuration

Configuration is based on InscrybMDE config

• 中文
• English

Examples

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

Dependencies

• SimpleMDE

Licence

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

Copyright (c) 2019 Dan Trevino