# markdown-editor-gk

> a light-weight Markdown editor based on React

Latest version **1.0.0** (published 2020-03-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install markdown-editor-gk
pnpm add markdown-editor-gk
yarn add markdown-editor-gk
bun add markdown-editor-gk
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-03-25 |
| First published | 2020-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 177.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1137 |
| Author | HarryChen && ShuangYa |
| Maintainers | guokui0205 |
| Keywords | markdown, html, editor, parser, react, component, plugins, pluggable |

## Links

- npm: https://www.npmjs.com/package/markdown-editor-gk
- Repository: https://github.com/HarryChen0506/react-markdown-editor-lite
- Homepage: https://github.com/HarryChen0506/react-markdown-editor-lite#readme
- Issues: https://github.com/HarryChen0506/react-markdown-editor-lite/issues
- npm.io page: https://npm.io/package/markdown-editor-gk

## Dependencies (2)

- [uuid](https://npm.io/package/uuid.md) ^3.4.0
- [eventemitter3](https://npm.io/package/eventemitter3.md) ^4.0.0

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-03-25

## README

react-markdown-editor-lite
========

[![NPM package][npm]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]

[中文文档](README_CN.md)

* A light-weight(20KB zipped) Markdown editor of React component
* Supports TypeScript
* Supports custom markdown parser
* Full markdown support
* Supports pluggable function bars
* Full control over UI
* Supports image uploading and dragging
* Supports synced scrolling between editor and preview
* 一款轻量的基于React的Markdown编辑器, 压缩后代码只有20KB
* 支持TypeScript
* 支持自定义Markdown解析器
* 支持常用的Markdown编辑功能，如加粗，斜体等等...
* 支持插件化的功能键
* 界面可配置, 如只显示编辑区或预览区
* 支持图片上传或拖拽
* 支持编辑区和预览区同步滚动

## Demo
Online demo <br>[https://harrychen0506.github.io/react-markdown-editor-lite/](https://harrychen0506.github.io/react-markdown-editor-lite/)

Default configuration

![image](https://github.com//HarryChen0506/react-markdown-editor-lite/blob/master/image/react-markdown-editor-lite-v1.0.0.PNG?raw=true)

Pluggable bars

![image](https://github.com//HarryChen0506/react-markdown-editor-lite/blob/master/image/react-markdown-editor-lite-v1.0.0-plugins.PNG?raw=true)


## Install

```shell
npm install react-markdown-editor-lite --save
# or
yarn add react-markdown-editor-lite
```

## Basic usage
Following steps:
* Import react-markdown-editor-lite
* Register plugins if required
* Initialize a markdown parser, such as markdown-it
* Start usage

```js
// import react, react-markdown-editor-lite, and a markdown parser you like
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import MarkdownIt from 'markdown-it'
import MdEditor from 'react-markdown-editor-lite'
// import style manually
import 'react-markdown-editor-lite/lib/index.css';

// Register plugins if required
// MdEditor.use(YOUR_PLUGINS_HERE);

// Initialize a markdown parser
const mdParser = new MarkdownIt(/* Markdown-it options */);

// Finish!
function handleEditorChange({html, text}) {    
  console.log('handleEditorChange', html, text)
}
export default (props) => {
  return (
    <MdEditor
      value=""
      renderHTML={(text) => mdParser.render(text)}
      onChange={handleEditorChange}
      />
  )
}
```

## Usage in Next.js

```js
import dynamic from 'next/dynamic'
import 'react-markdown-editor-lite/lib/index.css';

const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
  ssr: false
});

export default function() {
  return (      
    <div style="height: 500px">
      <MdEditor
        value=""
        renderHTML={/* Render function */}
      />                
    </div>
  )
}
```


## More

* Configuration items see [here](./docs/configure.md)
* APIs see [here](./docs/api.md)
* Plugins developer see [here](./docs/plugin.md)
* Full demo see [src/demo/index.tsx](https://github.com/HarryChen0506/react-markdown-editor-lite/blob/master/src/demo/index.tsx)

## Authors
- ShuangYa [github/sylingd](https://github.com/sylingd)
- HarryChen0506 [github/HarryChen0506](https://github.com/HarryChen0506)

## License
[MIT](LICENSE)

[npm]: https://img.shields.io/npm/v/react-markdown-editor-lite.svg
[npm-url]: https://www.npmjs.com/package/react-markdown-editor-lite
[npm-downloads-image]: http://img.shields.io/npm/dm/react-markdown-editor-lite.svg?style=flat
[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: LICENSE

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