# simple-m-editor

> > A markdown editor with Vue@3

Latest version **3.0.0-beta.0** (published 2023-09-10) · 0 weekly downloads

## Install

```sh
npm install simple-m-editor
pnpm add simple-m-editor
yarn add simple-m-editor
bun add simple-m-editor
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0-beta.0 |
| Published | 2023-09-10 |
| First published | 2019-02-14 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 5 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | yeachan |

## Links

- npm: https://www.npmjs.com/package/simple-m-editor
- npm.io page: https://npm.io/package/simple-m-editor

## Dependencies (5)

- [marked](https://npm.io/package/marked.md) ^7.0.5
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.7.0
- [marked-highlight](https://npm.io/package/marked-highlight.md) ^2.0.5
- [@vitejs/plugin-vue](https://npm.io/package/@vitejs/plugin-vue.md) ^4.3.4

## Recent versions

- 3.0.0-beta.0 (latest) — 2023-09-10
- 2.7.0 — 2023-09-03
- 1.0.0-beta.2 — 2023-02-14
- 1.0.0-beta.1 — 2023-01-27
- 0.4.6 — 2021-09-08
- 0.4.4 — 2021-08-02
- 0.4.3 — 2019-12-20
- 0.4.2 — 2019-12-18
- 0.4.1 — 2019-10-18
- 0.4.0 — 2019-10-17
- 0.3.5 — 2019-08-23
- 0.3.4 — 2019-08-23
- 0.3.3 — 2019-08-17
- 0.3.1 — 2019-08-17
- 0.3.0 — 2019-08-05
- … 17 more at https://npm.io/package/simple-m-editor/versions

## README

# simple-m-editor

> A markdown editor with Vue@3

If you want to use it with vue@2.7, you can use simple-m-editor@2.x.
If you want to use it with vue@2.6 or older version, you can use simple-m-editor@0.4.

![GitHub package.json version](https://img.shields.io/github/package-json/v/hellomrbigshot/simple-m-editor)
![GitHub](https://img.shields.io/github/license/hellomrbigshot/simple-m-editor)

## Install

### use npm
```
npm install --save simple-m-editor
```
### use yarn
```
yarn add simple-m-editor
```
### use pnpm
```
pnpm i simple-m-editor
```

## Usage with Vue.js

```
// you can add class "m-editor-preview" to your element to
// use the same style as the editor shows
<script setup>
import { MEditor, marked } from 'simple-m-editor'
import 'simple-m-editor/dist/style.css'
const text = ref('')
const markdownContent = ref('')
const handleChange = (data) => {
  markdownContent.value = data.htmlContent
}
</script>
<template>
  <div>
    <m-editor
      v-model="text"
      :debounce-render="true"
      :debounce-render-wait="500"
      @on-change="handleChange"
    />
    <div class="m-editor-preview" v-html="markdownContent"></div>
  </div>
</template>
```

## Preview

[address](https://hellomrbigshot.github.io/simple-m-editor/index.html)

## Api

### props

| name       | type   | default     | description     |
| ---------- | -------| ----------- | --------------- |
| value      | String |             | value           |
| placeholder| String | ''     | placehoder      |
| mode       | String | live        | one of ['live', 'edit', 'preview']|
| full-screen | Boolean| false       | full screen or not |
| show-line-num| Boolean| true        | show side line number or not |
| theme      | String | light       | light or dark   |
| auto-scroll| Boolean| true        | auto sroll or not |
| debounce-render | Boolean | false | debounce render html when edit |
| debounce-render-wait | Number | 200 | debounce wait time |



### event

| event name | description | return value |
| -------  | ------ | -----------    |
| on-change | callback when editor is changed | Object: { content, htmlContent } |
| on-mode-change | callback when editor's mode is change | mode, one of ['live', 'edit', 'preview']; oldMode, one of ['live', 'edit', 'preview'] |
| on-full-screen-change | callback when editor's fullscreen change | fullscreen status, true or false |


## Licence

[MIT Licence](./LICENSE)

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