# aor-rich-text-input-with-image-handler

> component for admin-on-rest, useful for editing HTML code in admin GUIs.

Latest version **1.0.1** (published 2017-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install aor-rich-text-input-with-image-handler
pnpm add aor-rich-text-input-with-image-handler
yarn add aor-rich-text-input-with-image-handler
bun add aor-rich-text-input-with-image-handler
```

## 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.0.1 |
| Published | 2017-04-01 |
| First published | 2017-03-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 23 |
| Author | François Zaninotto, ClemTheDasher |
| Maintainers | clemthedasher |
| Keywords | reactjs, react, rest, richtext, html, wysiwyg, editor, image upload |

## Links

- npm: https://www.npmjs.com/package/aor-rich-text-input-with-image-handler
- Repository: https://github.com/marmelab/aor-rich-text-input
- Homepage: https://github.com/marmelab/aor-rich-text-input-with-image-handler#readme
- Issues: https://github.com/marmelab/aor-rich-text-input-with-image-handler/issues
- npm.io page: https://npm.io/package/aor-rich-text-input-with-image-handler

## Dependencies (3)

- [quill](https://npm.io/package/quill.md) ~1.1.9
- [react](https://npm.io/package/react.md) ~15.4.0
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ~4.0.8

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2017-04-01
- 0.0.1 — 2017-03-10

## README

# `<RichTextInput>` for admin-on-rest (with image handler)

For editing HTML with [admin-on-rest](https://github.com/marmelab/admin-on-rest), use the `<RichTextInput>` component. It embarks [quill](http://quilljs.com/), a popular cross-platform Rich Text Editor.
**In this fork, you can use a server side API to upload image, and then get a remote url instead of base64 data url.**

![`<RichTextInput>` example](http://marmelab.com/admin-on-rest/img/rich-text-input.png)

## Installation

```sh
npm install aor-rich-text-input-with-image-handler --save-dev
```

## Usage

```js
import React from 'react';
import {
    DateInput,
    Edit,
    EditButton,
    LongTextInput,
    TextInput,
} from 'admin-on-rest/mui';
import RichTextInput from 'aor-rich-text-input-with-image-handler';

const PostTitle = ({ record }) => {
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};
const uploadResourceAPI = "http://your.domain/api/v1/" + "resources"

export const PostEdit = (props) => (
    <Edit title={<PostTitle />} {...props}>
        <DisabledInput label="Id" source="id" />
        <TextInput source="title" validation={{ required: true }} />
        <LongTextInput source="teaser" validation={{ required: true }} />
        <RichTextInput source="body" validation={{ required: true }} uploadAPI={uploadResourceAPI} />
        <DateInput label="Publication date" source="published_at" />
    </Edit>
);
```

You can customize the rich text editor toolbar using the `toolbar` attribute, as described on the [Quill official toolbar documentation](https://quilljs.com/docs/modules/toolbar/).

```js
<RichTextInput source="body" toolbar={[ ['bold', 'italic', 'underline', 'link'] ]} />
```

## License

This library is licensed under the [MIT Licence](LICENSE), and sponsored by [marmelab](http://marmelab.com).

---
_Source: https://npm.io/package/aor-rich-text-input-with-image-handler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._