# @orh/vue-markdown-editor

> Vue markdown editor and marked

Latest version **3.1.1** (published 2021-11-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @orh/vue-markdown-editor
pnpm add @orh/vue-markdown-editor
yarn add @orh/vue-markdown-editor
bun add @orh/vue-markdown-editor
```

## 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 | 3.1.1 |
| Published | 2021-11-03 |
| First published | 2019-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 (+3 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | orh |
| Maintainers | orh |
| Keywords | vue, markdown, markdown-editor, vue-markdown-editor, marked, vue-marked |

## Links

- npm: https://www.npmjs.com/package/@orh/vue-markdown-editor
- Repository: https://github.com/ouronghuang/vue-markdown-editor
- Issues: https://github.com/ouronghuang/vue-markdown-editor/issues
- npm.io page: https://npm.io/package/@orh/vue-markdown-editor

## Dependencies (3)

- [marked](https://npm.io/package/marked.md) ^3.0.8
- [simplemde](https://npm.io/package/simplemde.md) ^1.11.2
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.3.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

- 3.1.1 (latest) — 2021-11-03
- 3.1.0 — 2021-11-03
- 4.2.0 — 2021-06-11
- 4.1.1 — 2021-06-09
- 4.1.0 — 2021-05-20
- 4.0.0 — 2021-05-17
- 3.0.5 — 2020-12-23
- 3.0.4 — 2020-12-22
- 3.0.3 — 2020-12-22
- 3.0.2 — 2020-12-22
- 3.0.1 — 2020-12-22
- 3.0.0 — 2020-12-22
- 2.0.1 — 2020-11-20
- 1.0.0 — 2019-08-14

## README

<h1 align="center">
    Vue markdown editor and marked
</h1>

<p align="center">
    <a href="https://www.npmjs.com/package/@orh/vue-markdown-editor">
        <img alt="npm" src="https://img.shields.io/npm/v/@orh/vue-markdown-editor?color=ea2039">
    </a>
    <a href="https://www.npmjs.com/package/@orh/vue-markdown-editor">
        <img alt="npm" src="https://img.shields.io/npm/dt/@orh/vue-markdown-editor?color=ea2039">
    </a>
    <a href="https://github.com/ouronghuang/vue-markdown-editor">
        <img alt="GitHub" src="https://img.shields.io/github/license/ouronghuang/vue-markdown-editor">
    </a>
</p>

* 适用于 Vue 2/3 的具备 markdown 编辑器和 marked 文本解析显示功能
* 基于 [simplemde-markdown-editor](https://github.com/sparksuite/simplemde-markdown-editor)
* 基于 [marked](https://github.com/markedjs/marked)
* 基于 [highlight.js](https://github.com/highlightjs/highlight.js)

![demo](./demo.jpg)

## Vue 3.x

1. 安装

```bash
$ yarn add @orh/vue-markdown-editor@4
```

2. 引入

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import MarkdownEditor from '@orh/vue-markdown-editor';
import 'simplemde/dist/simplemde.min.css';
import 'highlight.js/styles/<theme>.css';

createApp(App).use(MarkdownEditor).mount('#app')
```

3. 使用

[示例代码](./src/App.vue)

## Vue 2.x

1. 安装

```bash
$ yarn add @orh/vue-markdown-editor@3
```

2. 引入

```javascript
import Vue from 'vue';
import App from './App.vue';
import VueMarkdownEditor from '@orh/vue-markdown-editor';
import '@orh/vue-markdown-editor/dist/css/vue-markdown-editor.css';
import '@orh/vue-markdown-editor/dist/css/themes/<theme>.css';

Vue.use(VueMarkdownEditor);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

## 编辑器

```html
<vue-markdown-editor v-model="content"></vue-markdown-editor>
```

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `value` | `markdown` 文本，可以使用 `v-model` 双向绑定数据 | `String` | 空 |
| `options` | 可传入 `simplemde-markdown-editor` 的所有配置 | `Object` | `{}` |
| `name` | 表单 `textarea` 的 `name` 属性 | `String` | - |

## 解析器

```html
<vue-marked :value="content" @rendered="handleRendered"></vue-marked>
```

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `value` | `markdown` 文本 | `String` | 空 |

### Events

| 事件 | 说明 | 回调参数 |
| --- | --- | --- |
| `rendered` | `marked` 渲染完成后触发 | 渲染后的 `HTML` 代码 |

## 本地开发/预览

1. 安装依赖

```
$ yarn
```

2. 运行

```
$ yarn serve
```

## License

MIT

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