# @kangc/v-md-editor

> A markdown editor built on Vue

Latest version **1.7.12** (published 2023-11-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kangc/v-md-editor
pnpm add @kangc/v-md-editor
yarn add @kangc/v-md-editor
bun add @kangc/v-md-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 | 1.7.12 |
| Published | 2023-11-09 |
| First published | 2020-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 15 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 (+13 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1274 |
| Maintainers | ckang1229 |
| Keywords | javascript, vue3, vue, html, markdown, editor, vue-markdown-editor, vue3-markdown-editor, vue-markdown, vue3-markdown, markdown-it, vue-editor, vue3-editor, markdown-editor |

## Links

- npm: https://www.npmjs.com/package/@kangc/v-md-editor
- Repository: https://github.com/code-farmer-i/vue-markdown-editor
- Homepage: https://github.com/code-farmer-i/vue-markdown-editor#readme
- Issues: https://github.com/code-farmer-i/vue-markdown-editor/issues
- npm.io page: https://npm.io/package/@kangc/v-md-editor

## Dependencies (15)

- [xss](https://npm.io/package/xss.md) ^1.0.9
- [katex](https://npm.io/package/katex.md) ^0.13.11
- [mermaid](https://npm.io/package/mermaid.md) ^8.10.1
- [prismjs](https://npm.io/package/prismjs.md) ^1.23.0
- [codemirror](https://npm.io/package/codemirror.md) ^5.61.0
- [markdown-it](https://npm.io/package/markdown-it.md) ^12.0.6
- [highlight.js](https://npm.io/package/highlight.js.md) ^10.7.1
- [copy-to-clipboard](https://npm.io/package/copy-to-clipboard.md) ^3.3.1
- [markdown-it-attrs](https://npm.io/package/markdown-it-attrs.md) ^4.0.0
- [markdown-it-emoji](https://npm.io/package/markdown-it-emoji.md) 1.4.0
- [@vuepress/markdown](https://npm.io/package/@vuepress/markdown.md) ^1.8.2
- [insert-text-at-cursor](https://npm.io/package/insert-text-at-cursor.md) ^0.3.0
- [markdown-it-container](https://npm.io/package/markdown-it-container.md) ^3.0.0
- [@vuepress/shared-utils](https://npm.io/package/@vuepress/shared-utils.md) ^1.8.2
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.7.12 (latest) — 2023-11-09
- 2.3.18 (next) — 2023-11-09
- 2.3.18-beta.1 (next-beta) — 2023-11-09
- 1.7.9-beta.1 (beta) — 2021-12-27
- 2.3.18-beta.0 — 2023-10-12
- 2.3.17 — 2023-08-18
- 2.3.16 — 2023-07-25
- 1.7.11 — 2022-04-13
- 1.7.10 — 2022-04-13
- 2.3.15 — 2022-04-02
- 1.7.9 — 2022-04-02
- 2.3.14 — 2022-03-03
- 2.3.13 — 2021-12-28
- 1.7.9-beta.0 — 2021-12-27
- 1.7.8 — 2021-11-05
- … 165 more at https://npm.io/package/@kangc/v-md-editor/versions

## README

<h1 align="center">Markdown Editor built on Vue</h1>

<p align="center">
  <a href="https://npmcharts.com/compare/@kangc/v-md-editor?minimal=true"><img src="https://img.shields.io/npm/dm/@kangc/v-md-editor.svg?sanitize=true" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@kangc/v-md-editor"><img src="https://img.shields.io/npm/v/@kangc/v-md-editor.svg?sanitize=true" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@kangc/v-md-editor"><img src="https://img.shields.io/npm/l/@kangc/v-md-editor.svg?sanitize=true" alt="License"></a>
</p>

## Links

- [Demo](https://code-farmer-i.github.io/vue-markdown-editor/examples/base-editor.html)
- [Documentation](https://code-farmer-i.github.io/vue-markdown-editor/)
- [中文文档](http://ckang1229.gitee.io/vue-markdown-editor/zh/)
- [Changelog](https://code-farmer-i.github.io/vue-markdown-editor/changelog.html)

## Communication

qq group: 798884474

## Install

```bash
# Vue 2 use npm
npm i @kangc/v-md-editor -S
# Vue 2 use yarn
yarn add @kangc/v-md-editor

# Vue 3 use npm
npm i @kangc/v-md-editor@next -S
# Vue 3 use yarn
yarn add @kangc/v-md-editor@next
```

## Quick Start

```js
import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

// Prism
import Prism from 'prismjs';
// highlight code
import 'prismjs/components/prism-json';

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

Vue.use(VueMarkdownEditor);
```

## Quick Start In Vue3

```js
import { createApp } from 'vue';
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

// Prism
import Prism from 'prismjs';
// highlight code
import 'prismjs/components/prism-json';

VMdEditor.use(vuepressTheme, {
  Prism,
});

const app = createApp(/*...*/);

app.use(VMdEditor);
```

## Usage

```html
<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
  export default {
    data() {
      return {
        text: '',
      };
    },
  };
</script>
```

## Usage Composition Api

```html
<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const text = ref('');

      return {
        text,
      };
    },
  };
</script>
```

## Sponsor

Paypal

[PayPal.Me](https://paypal.me/codefarmeri?locale.x=zh_XC)

Alipay 支付宝

<img src="https://user-images.githubusercontent.com/15082905/119299019-c583e500-bc90-11eb-8b34-4bff83da3745.png" width="140"/>

WeChat Pay 微信

<img src="https://user-images.githubusercontent.com/15082905/119299205-13005200-bc91-11eb-919d-543b1550bab6.png" width="140"/>

## Refrence

- [ElementUi Utils clickoutside](https://github.com/ElemeFE/element/blob/dev/src/utils/clickoutside.js)
- [ElementUi Utils resize-event](https://github.com/ElemeFE/element/blob/dev/src/utils/resize-event.js)
- [ElementUi Utils scrollbar-width](https://github.com/ElemeFE/element/blob/dev/src/utils/scrollbar-width.js)
- [ElementUi Scrollbar Component](https://github.com/ElemeFE/element/tree/dev/packages/scrollbar)
- [vuepress-plugin-container](https://github.com/vuepress/vuepress-community/blob/master/packages/vuepress-plugin-container/src/markdown-it-container.ts)
- [vuepress markdown preWrapper](https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/markdown/lib/preWrapper.js)
- [vuepress markdown link](https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/markdown/lib/link.js)
- [markdown-it-katex](https://github.com/waylonflinn/markdown-it-katex/blob/master/index.js)
- [markdown-it-table-of-contents](https://github.com/Oktavilla/markdown-it-table-of-contents/blob/master/index.js)
- [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists/blob/master/index.js)

## License

[MIT](https://github.com/code-farmer-i/vue-markdown-editor/blob/dev/LICENSE)

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