Skip to main content

Spoiler Plugin

Spoilers plugin allows the user to hide some content (text, image, gallery, video ) on the page. Spoiler for plugins done through plugin settings modal, and for text through text formatting toolbar.

For consume Spoiler you need to:

  1. spoiler plugins - add spoiler plugin to plugins array (described below).
  2. spoiler text - add spoiler button to text formatting toolbar by add it to getToolbarSettings config. For more information click here or look at the example below.
Add content and spoiler it!

Usage#

/* Editor */
import { RicosEditor } from 'ricos-editor';
import { pluginSpoiler, SpoilerEditorWrapper } from 'wix-rich-content-plugin-spoiler';
<RicosEditor plugins={[pluginSpoiler({SpoilerEditorWrapper, supportedPlugins: [IMAGE_TYPE, GALLERY_TYPE, VIDEO_TYPE]})]} />;
/* For support inline spoiler (for text), you should add spoiler button to text formatting toolbar by add it to getToolbarSettings config.
For more information click [here](https://ricos.js.org/docs/rce_api/ToolbarCustomization/#gettoolbarsettings-api) */
getToolbarSettings: ({ textButtons }) => [{
getButtons: () => {
desktop: [FORMATTING_BUTTONS.SPOILER],
}
}]
/* Viewer */
import { RicosViewer } from 'ricos-viewer';
import {
spoilerInlineStyleMapper,
initSpoilersContentState,
SpoilerViewerWrapper,
SPOILER_TYPE,
pluginSpoiler,
} from 'wix-rich-content-plugin-spoiler/viewer';
<RicosViewer
plugins={[pluginSpoiler({initSpoilersContentState, SpoilerViewerWrapper})]}
inlineStyleMappers={spoilerInlineStyleMapper(config, initialState)}
/>;
/* For support inline spoiler styles (for text), you should add spoilerInlineStyleMapper to inlineStyleMapper
For more information click [here](https://ricos.js.org/docs/plugins_api/PluginCustomization/#text-color-inline-style-mapper)

Spoiler Editor Config API#

supportedPlugins#

controls on which plugins spoiler can be done. If not given - spoiler can be don on all supported plugins

{
supportedPlugins: [IMAGE_TYPE, GALLERY_TYPE, VIDEO_TYPE],
}

SpoilerEditorWrapper#

Wrapper component which enables to override the default spoiler component that wrapping the plugins

{
SpoilerEditorWrapper: config => WrappedComponent => <YourSpoilerWrapper><WrappedComponent/></YourSpoilerWrapper>,
}

Spoiler Viewer Config API#

initSpoilersContentState#

Function that gets contentState and returns a new contentState with block after modify manipulation on spoiler block style

{
initSpoilersContentState: contentState => ({...contentState, blocks: modifiedBlocks}),
}

SpoilerViewerWrapper#

Wrapper component which enables to override the default spoiler component that wrapping the plugins

{
SpoilerViewerWrapper: <YourSpoilerWrapper>{children}</YourSpoilerWrapper>,
}
Edit this page