# react-qn-md

> 基于react封装的七牛云上传图片的markdown组件

Latest version **1.1.6** (published 2020-08-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-qn-md
pnpm add react-qn-md
yarn add react-qn-md
bun add react-qn-md
```

## 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.1.6 |
| Published | 2020-08-28 |
| First published | 2020-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 900.4 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | lytton |
| Maintainers | lyttonlee |

## Links

- npm: https://www.npmjs.com/package/react-qn-md
- Repository: https://github.com/lyttonlee/react-qn-md
- Homepage: http://www.huili.cool/editor
- Issues: https://github.com/lyttonlee/react-qn-md/issues
- npm.io page: https://npm.io/package/react-qn-md

## Dependencies (4)

- [marked](https://npm.io/package/marked.md) ^1.1.1
- [qiniu-js](https://npm.io/package/qiniu-js.md) ^3.1.1
- [highlight.js](https://npm.io/package/highlight.js.md) ^10.1.2
- [random-string](https://npm.io/package/random-string.md) ^0.2.0

## Recent versions

- 1.1.6 (latest) — 2020-08-28
- 1.1.5 — 2020-08-21
- 1.1.4 — 2020-08-21
- 1.1.3 — 2020-08-21
- 1.1.2 — 2020-08-21
- 1.1.1 — 2020-08-20
- 1.1.0 — 2020-08-18
- 1.0.4 — 2020-08-17
- 1.0.3 — 2020-08-17
- 1.0.2 — 2020-08-17
- 1.0.1 — 2020-08-14
- 1.0.0 — 2020-08-14

## README

# react-qn-md

> markdown 语法的react web-component 组件，直接封装了七牛云上传方法，可以直接拖动图片到编辑区域实现上传

## 安装
```
npm install react-qn-md -S

or

yarn add react-qn-md -S
```

## 在线体验 & Demo
[Demo](http://www.huili.cool/editor)

## api

**属性 props**

| name | required | type | default | description |
| :--: | :--: | :--: | :--: | :--: |
| initInfo | false | string | '' | 初始的md语法字符串 |
| theme | false | string | light | 颜色主题 'light' ,'dark' 可选 |
| imgStyle | false | string | --- | 七牛云图片样式规则 |
| domain | false |  string| --- | 七牛云空间的外链域名 |
| customStyle | false |  object| --- | 自定义编辑框的样式 |
| edit | false |  bool| true | 是否显示编辑框,false时用于展示 |
| token | false |  string| '' | 七牛云上传token |
| getToken | false |  function | --- | 实现获取七牛云上传token |
| updateInfo | false |  function | param -> mdInfo | 返回最新markdown内容 |

> 如果需要上传图片功能 则 domain token getToken 是必须的

## Use

```jsx
import React, {useState} from 'react';
import './App.css';
import Editor from 'react-qn-md'

function App() {
  const [token, setToken] = useState('')
  const getToken = () => {
    fetch('http://www.huili.cool:8901/api/uptoken', {
      method: 'GET'
    }).then((res) => {
      if (res.status === 200) {
        res.text().then((token) => {
          setToken(token) 
        })
      }
    })
  }
  const updateInfo = (info) => {
    // do something with new info
    // save or submit ...
    console.log(info)
  }
  return (
    <div className="App">
      <Editor
        initInfo="## Hello World!"
        domain="http://editor.huili.cool/"
        token={token}
        getToken={getToken}
        updateInfo={updateInfo}
        theme="light"
        customStyle={{height: '40vh', overflow: 'auto'}} >
      </Editor>
    </div>
  );
}

export default App;

```

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