# rechextor

> A simple rich text editor component for React

Latest version **0.1.0** (published 2018-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install rechextor
pnpm add rechextor
yarn add rechextor
bun add rechextor
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2018-09-06 |
| First published | 2018-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 45.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Albert Zhong |
| Maintainers | xinkule |
| Keywords | react, slate, rich, text, editor, rich-text-editor, react-component, component |

## Links

- npm: https://www.npmjs.com/package/rechextor
- Repository: https://github.com/xinkule/rechextor
- Homepage: https://github.com/xinkule/rechextor#readme
- Issues: https://github.com/xinkule/rechextor/issues
- npm.io page: https://npm.io/package/rechextor

## Dependencies (6)

- [slate](https://npm.io/package/slate.md) ^0.34.0
- [immutable](https://npm.io/package/immutable.md) ^3.8.2
- [is-hotkey](https://npm.io/package/is-hotkey.md) ^0.1.3
- [rc-upload](https://npm.io/package/rc-upload.md) ^2.5.1
- [slate-react](https://npm.io/package/slate-react.md) ^0.13.2
- [slate-html-serializer](https://npm.io/package/slate-html-serializer.md) ^0.7.2

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.1.0 (latest) — 2018-09-06

## README

# Rechextor

一个基于 [slate](https://github.com/ianstormtaylor/slate) 封装的轻量级 React 富文本编辑器

## 安装

```sh
npm install rechextor --save
```

## 使用

```js
import Rechextor from 'rechextor';

class App extends React.Component {
  state = { value: '' };

  handleChange = value => {
    this.setState({ value });
  };

  handleSuccess = (result, insertImage) => {
    // result 为上传图片的 http response body
    // insertImage 为一个回调函数，接受一个 url 作为参数，只有调用此函数才能插入图片
    insertImage(result.data.url);
  };

  render() {
    return (
      <Rechextor
        tools={[
          'bold',
          'strong',
          'italic',
          'underline',
          'strikethrough',
          'image',
          'tag',
          'blockquote',
          'line'
        ]}
        initialValue={this.state.value}
        placeholder="To be continued..."
        onChange={this.handleChange}
        uploadPath="/upload"
        onUploadSuccess={this.handleSuccess}
      />
    );
  }
}
```

## API

组件接受以下参数

| 参数名          | 描述                                                                                          | 类型     | 默认值 |
| --------------- | --------------------------------------------------------------------------------------------- | -------- | ------ |
| tools           | 工具栏列表，目前支持的工具见使用                                                              | string[] |        |
| initialValue    | 编辑器渲染的初始内容，此值只在第一次 Boolean(initialValue) 为 true 时生效，后续的更新会被忽略 | string   |        |
| placeholder     | 编辑器无内容时显示的 placeholder                                                              | string   |        |
| onChange        | 用于同步编辑器的更改，接受一个 html 字符串作为参数                                            | function |        |
| uploadPath      | 图片上传服务器地址，需要配合 onUploadSuccess 一起使用                                         | string   |        |
| onUploadSuccess | 图片上传成功的回调，说明见使用                                                                | function |        |
| beforeUpload    | 图片上传之前的回调，详见 [rc-upload](https://github.com/react-component/upload)               | function |        |
| onUploadError   | 图片上传失败的回调                                                                            | function |        |
| onBlur          | 编辑器失去焦点的回调                                                                          | function |        |
| onFocus         | 编辑器获得焦点的回调                                                                          | function |        |

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