SECURITY WARNING

Set the authentication on methods Download and Upload of the REST API according to your user's management settings.

1. Core elements and structure

CKEditorReactive is the application that contains the core module that is basically composed of 2 blocks:

- CKEditor with toolbar;

- HTML Viewer of content without a toolbar.

Web blocks available on the component

2. How to use the component

Reference the CKEditor component according to the picture below:

Manage your dependencies to have access to the component

Add an input or text area widget, name the input and associate it with a variable, then add the web block CKEditor to the screen.

CKEditor web block

At the end, your screen should look similar to the picture below.

Input or text area widget + CKEEditor web block

Click on CKEditor web block, then in the properties panel, fill in the options according to your needs.

Configure your CKEditor web block

3. How to configure the editor toolbar

The toolbar is defined through a configuration structure. The default configuration is loaded on the OnInitialize client action (see picture below). It is possible to create a customized configuration using an automated tool that can be accessed using the button “Toolbar Configuration” in the Demo page.

Configure the toolbar localized on the OnInitialize client action

CKEditor adds HTML to manage the style of the text. To display all characters in a non formatted way, use the TransferDataFromEditorToContainer client action to transfer the content to the HTMLViewerContainer block.

TransferDataFromEditorToContainer client action