Skip to main content

Intro to Visual editing

In your Brick components you can use React Bricks exported Visual editing components.

Text

Used to have an editable plain text.

See the Text docs

RichText

Used for multiline rich text editing. You may choose the available rich text features (bold, italic, link, code, highlight, headings, quote) and provide custom render functions for each feature.

See the RichText docs

RichTextExt

This is the new extensible version of the RichText component. It is based on a plugins system, which allows you to customize also the buttons, the shortcut hot keys and create custom plugins from scratch.

See the RichTextExt docs.

To extend the RichText behavior, you may see also plugin helpers like markPluginConstructor and blockPluginConstructor.

Image

The Image component allows to show and upload images. React Bricks APIs will create a small size placeholder for lazy loading and responsive versions to optimize data transfer. Images are served from a global CDN. On the frontend, this component lazyloads the images and uses the sourceSet created on the server to load the optimal image size.

See the Image docs

File

The File component allows the user to upload files. This is useful when you need to have downloadable documents in your page. You can provide a render function to present the document on the frontend (the argument is a file object with file name, url and file size). On the Admin interface you'll be able to click on the component and upload a file, change it, remove it and provide a friendly name for it.

See the File docs