@artibox/editor

React Artibox Editor V2

Rich Editor built with React Hooks

Example

import {
  ArtiboxProvider,
  Editor,
  createFileUploader,
  BlockTypes,
  Features,
} from '@artibox/editor';

const {
  TEXT_BLOCK_FULL,
  IMAGE_BLOCK_BASIC,
  IMAGE_ALIGN,
  YOUTUBE_BLOCK,
  SPLIT_LINE,
} = Features;

const artiboxOptions = {
  features: (
    TEXT_BLOCK_FULL
    | IMAGE_BLOCK_BASIC
    | IMAGE_ALIGN
    | YOUTUBE_BLOCK
    | SPLIT_LINE
  ),
  parseImageFile: createFileUploader('http://sample.artibox.org/uploader/files', files => files[0]),
  parseImageURL: file => `http://sample.artibox.org/uploads/${file}`,
};

function SimpleForm() {
  return (
    <ArtiboxProvider options={artiboxOptions}>
      <div>
        <Editor onChange={content => console.log('Editor Content', content)} />
      </div>
    </ArtiboxProvider>
  );
}

Use with redux-form

import {
  ArtiboxProvider,
  reduxFormEditor,
} from '@artibox/editor';
import {
  Field,
} from 'redux-form';

function SimpleForm() {
  return (
    <ArtiboxProvider>
      <form>
      	 <Field
      	   name="content"
           component={reduxFormEditor} />
      </form>
    </ArtiboxProvider>
  );
}

Options

• features: number

Push an bitwise number to active features

• parseImageFile: (file: File, emitter: ?Emitter) => Promise

Custom parser for image block, the upload image stored with base64 encoder in default. You can pass a new parse function changing to upload to server like s3. This function should return a promise object and resolve the data you want to store (like URL, filename)

• parseImageURL: (filename: string) => string

With parseImageFile function, when image block shown, the block viewer will call this function to map a correct image url.

Helpers

• createFileUploader(targetURL: string, done: Function, fieldKey?: string = 'files', method?: string = 'POST') => Function

You can use this helper to create HTTP formdata/multipart POST easier. This function will return a proper function for parseImageFile.

• toJSON(storedValue: { blocks: Array })

You can use this function to transform value into json can be stringified.