me-rich-editor

React rich text editor with image upload support

Usage

Minimal setup

import RichEditor from '@methodexists/me-rich-editor';

<RichEditor
  value={this.state.value}
  onChange={value => this.setState({ value })}
/>

This will render textarea with default toolbar and allows to produce HTML value in a visual way.

Custom Image Uploader

import RichEditor from '@methodexists/me-rich-editor';

const handleImageUpload = (file) => {
  // notify user that the image is uploading
  const hide = message.loading(`Uploading ${file.name}…`, 0);
  return upload(file) // call API to upload the file
    // then hide the spinner and return the URL of the uploaded file
    .then((res) => { hide(); return res.url; });
};


<RichEditor
  value={this.state.value2}
  onChange={value2 => this.setState({ value2 })}
  onImageUpload={handleImageUpload}
/>

If onImageUpload prop is specified it will be called when user selects an image to upload.
The handler should return a promise which resolves with the URL of the uploaded image.
Also the handler is repsonsible for showing a spinner during the upload and hiding it when upload is finished.

API

Prop	Type	Default	Description
* value	HTML string		The text to render in the editor
* onChange	func(value:string)		Called on any change with new HTML value
onImageUpload	func(file:fileObject): Promise	undefined	Custom image uploader handler. Should return a promise which resolves to the uploaded image URL
modules	object	undefined	If specified will replace default modules prop for react-quill
debounceDelay	number	700	Delay in milliseconds before firing onChange handler when typing in the editor

Default modules are defined in src/index.js

Contributing

See CONTRIBUTING.md for how to develop a component.