Button Plugin

There are two types of buttons:

1. Link Button - basically a link in a shape of a button.

Add a Link Button to check it out!

2. Action Button - by passing an `onClick` prop callback, when clicking the button it triggers the `onClick` action.

Add an Action Button to check it out!

Usage - Link Button

/* Editor */

import { RicosEditor } from 'ricos-editor';

import { pluginLinkButton } from 'wix-rich-content-plugin-button';

<RicosEditor plugins={[pluginLinkButton(LinkButtonConfig)]} />;

/* Viewer */

import { RicosViewer } from 'ricos-viewer';

import { pluginLinkButton } from 'wix-rich-content-plugin-button/viewer';

<RicosViewer plugins={[pluginLinkButton(LinkButtonConfig)]} />;

Usage - Action Button

/* Editor */

import { RicosEditor } from 'ricos-editor';

import { pluginActionButton } from 'wix-rich-content-plugin-button';

<RicosEditor plugins={[pluginActionButton(ActionButtonConfig)]} />;

/* Viewer */

import { RicosViewer } from 'ricos-viewer';

import { pluginActionButton } from 'wix-rich-content-plugin-button/viewer';

<RicosViewer plugins={[pluginActionButton(ActionButtonConfig)]} />;

Link & Action Button Config API

colors

Control Button colors

colors?: {

color1?: string,

color2?: string,

color3?: string,

...

`color${Number}?`: string,

}

Example value:

colors = {

color1: '#FEFDFD',

color2: '#D5D4D4',

color3: '#000000',

color4: '#000000',

color5: '#000000',

color6: '#ABCAFF',

color7: '#81B0FF',

color8: '#0261FF',

color9: '#0141AA',

color10: '#012055',

};

onTextColorAdded

onTextColorAdded: (color: string) => string[]

A function that receives a color and returns user text colors.

onBackgroundColorAdded

onBackgroundColorAdded: (color: string) => string[]

A function that receives a color and returns user background colors.

onBorderColorAdded

onBorderColorAdded: (color: string) => string[]

A function that receives a color and returns user border colors.

getTextColors

getTextColors: () => string[]

A function that returns user text colors.

getBorderColors

getBorderColors: () => string[]

A function that returns user border colors.

getBackgroundColors

getBackgroundColors: () => string[]

A function that returns user background colors.

Action Button Config API

onClick

onClick: () => void

A function that is triggered when clicking the button, it will trigger the onClick action.