@methodexists/me-rich-editor v0.0.3

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

Default modules are defined in src/index.js

Contributing

See CONTRIBUTING.md for how to develop a component.