# wangEditor for React

<!-- Badge -->
![MIT License](https://img.shields.io/badge/License-MIT-blue)
![jest badge](https://img.shields.io/badge/unit%20test-jest-yellowgreen)

[English documentation](./README-en.md)

## 介绍
基于[wangEditor](https://www.wangeditor.com/) 封装的React组件。

## 安装

1. 安装组件包

```shell
yarn add @wangeditor/editor-for-react
# 或者npm install @wangeditor/editor-for-react --save

```

2. 安装核心包

```shell
yarn add @wangeditor/editor

# 或者 npm install @wangeditor/editor --save
```
3. 导入组件

```ts
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
```

## 使用

详情参考[wangEditor react使用文档](https://www.wangeditor.com/v5/for-frame.html#react)。

### 在Next.js下使用
```js
import dynamic  from 'next/dynamic'
const WangEditor = dynamic(
  // 引入对应的组件 设置的组件参考上面的wangEditor react使用文档
  () => import('../components/myEditor'),
  {ssr: false}
)

export default function Home() {
  return <WangEditor />
}
```
使用案例可以参考[wangeditorV5-nextjs-demo](https://github.com/hahaaha/wangeditorV5-nextjs-demo)