Image Plugin

Picture is Worth a Thousand Words!

Add an image

Usage

/* Editor */

import { RicosEditor } from 'ricos-editor';

import { pluginImage } from 'wix-rich-content-plugin-image';

<RicosEditor plugins={[pluginImage(ImageConfig)]} />;

/* Viewer */

import { RicosViewer } from 'ricos-viewer';

import { pluginImage } from 'wix-rich-content-plugin-image/viewer';

<RicosViewer plugins={[pluginImage(ImageConfig)]} />;

Config

upload functions

note

upload functions are passed through RichContentEditor

e.g.

<RicosEditor plugins={plugins} content={content}>

<RichContentEditor helpers={{ handleFileUpload }} />

</RicosEditor>

handleFileUpload: (files: File[], updateEntity: UpdateEntityFunction) => void

handleFileSelection: (updateEntity: UpdateEntityFunction) => void

handleFileUpload is a function provided to handle media uploads from the native file input.
handleFileSelection is a function provided to handle media uploads from a custom file input.

In both functions when the upload phase is done the updateEntity callback should be called with an object containing the data, error (upon failure) and index (for multiple file uploads).

UpdateEntityFunction<T>: ({ data: T, error: MediaUploadError, index: number }) => void

data?: {

id: string,

original_file_name: string,

file_name: string,

width: number,

height: number,

}

MediaUploadError?: {

msg?: string | JSX.Element;

key?: MediaUploadErrorKey;

args?: Record<string, string | number>;

}

modify default config

defaultData: {

config: {

size: 'small' | 'fullWidth' |'content',

alignment: 'left' | 'right' | 'center',

showTitle: boolean,

showDescription: boolean,

},

},

Default value:

config: {

size: 'content',

alignment: 'center',

showTitle: true,

showDescription: true,

},

imageProps

An additional props to be added to the <img />

createGalleryForMultipleImages

createGalleryForMultipleImages: boolean;

When enabled, multiple images uploaded at once will be added as a gallery.

Viewer Config

disableExpand: boolean,