# vue-easymde2

> EasyMDE (2) - Markdown Editor component for Vue.js

Latest version **1.0.0** (published 2020-07-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-easymde2
pnpm add vue-easymde2
yarn add vue-easymde2
bun add vue-easymde2
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-07-11 |
| First published | 2020-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 576 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Author | Dave |
| Maintainers | straightdave |
| Keywords | Vue, SimpleMDE, EasyMDE, Markdown |

## Links

- npm: https://www.npmjs.com/package/vue-easymde2
- Repository: https://github.com/straightdave/vue-easymde
- Homepage: https://github.com/straightdave/vue-easymde#readme
- Issues: https://github.com/straightdave/vue-easymde/issues
- npm.io page: https://npm.io/package/vue-easymde2

## Dependencies (2)

- [marked](https://npm.io/package/marked.md) ^1.1.0
- [easymde](https://npm.io/package/easymde.md) ^2.10.1

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-07-11

## README

# Vue-EasyMDE

>[На русском](README.ru.md)

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

[![npm package](https://img.shields.io/npm/v/vue-easymde.svg)](https://npmjs.org/package/vue-easymde)
[![npm downloads](http://img.shields.io/npm/dm/vue-easymde.svg)](https://npmjs.org/package/vue-easymde)

# Use Setup

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

## Install

```bash
npm install vue-easymde --save

yarn add vue-easymde
```

## Use

- Internal reference in a single component

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

```javascript
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](#configuration)          |
| previewRender | Function | - | configs.previewRender |

## Events

| event | describe | arguments |
| ----| ----- | ---- |
| input | Triggered when the Input value changes | value |
| blur | Triggered when the Input loses focus | value |
| initialized | Triggered when initialization is complete | simplemde |

## Methods

``` js
this.$refs.markdownEditor.simplemde.togglePreview();
```

[examples/index.vue](./examples/index.vue)

[simplemde.js](https://github.com/sparksuite/simplemde-markdown-editor/blob/6abda7ab68cc20f4aca870eb243747951b90ab04/src/js/simplemde.js#L1908-L2026)

## Markdown style
> e.g. use Github's markdown style

[github-markdown-css](https://github.com/sindresorhus/github-markdown-css)

### install
```bash
$ npm install --save github-markdown-css

$ yarn add github-markdown-css
```

### use
```vue
<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
```vue
<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](https://github.com/xcatliu/simplemde-theme-base/wiki/List-of-themes))

> e.g. use simplemde-theme-base theme

### install
```
$ npm install --save simplemde-theme-base

$ yarn add simplemde-theme-base
```

### use
```vue
<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](https://github.com/Ionaru/easy-markdown-editor)

- [English](doc/configuration_en.md)
- [Русский](doc/configuration_ru.md)
- [中文](doc/configuration_zh.md)

## Examples

- [Simple Example](./examples/index.vue)
- [Nuxt Example](./examples/nuxt)
- [Demo Page](https://NikulinIlya.github.io/vue-easymde/)
- [Demo Source](https://github.com/NikulinIlya/vue-easymde/tree/gh-pages)

## Dependencies

- [EasyMDE](https://github.com/Ionaru/easy-markdown-editor)

## Licence

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

Copyright (c) 2018 F-loat

Copyright (c) 2019 Ilya Nikulin

---
_Source: https://npm.io/package/vue-easymde2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._